垂直居中和居中对齐文本并为 div 添加边距？我迷路了[重复]

Posted 2023-03-05

【中文标题】垂直居中和居中对齐文本并为 div 添加边距？我迷路了[重复]

【英文标题】：Vertical Center & Center align text and add margin to div? Im lost [duplicate]

【发布时间】：2015-06-16 10:19:48

【问题描述】：

您好，我正在为大学建立一个网站，但我不知道如何垂直对齐包含文本滑块的 div 中的文本。在我的网格布局中，垂直行中有 3 个文本滑块。 You can see the page livelink here

有人可以告诉我如何垂直对齐文本并在其中的 div 中添加边距，这样文本就不会靠边。我已经以多种方式尝试使用 CSS，但由于某种原因我没有得到任何乐趣。

第一个 div 的 html

<div class="trigger">
        <div class="slider2">
<div style="border-style:solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; background-image: url(quotegreen.jpg); background-size: cover; color: #CCC;" class="just_text">    <div class="caption-box">Testimonies</div>It was quite an eye-opening experience working with CDC. Their accessibility, personal attention to the finest details and willingness to design a website exactly the way I had envisioned was a rewarding experience.</div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; background-image: url(quotered.jpg); background-size: cover; color: #CCC;" class="just_text"><div class="caption-box">Testimonies</div>Thank you Cambridge Design Company! My business was literally going under until Daniel designed me a website that was a built customer machine. Now my business has been revived and I owe it all to you! Highly recommend!</div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height:200px; width:200px; background-image: url(quotegold.jpg); background-size:cover;" class="just_text"><div class="caption-box">Testimonies</div>We really liked the presentation and creative concepts Cambridge Design Company provided and loved the fact that we could work with your interns to achieve our charity goals.</div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height:200px; width:200px; background-image: url(quotegreen.jpg); background-size:cover;" class="just_text"><div class="caption-box">Testimonies</div>I couldn't be more pleased with The Cambridge Design Company and their staff. Not only are they relaxed and friendly but they are professional also, the quality of their web work is exceptional.</div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; background-image: url(quotered.jpg); background-size: cover; color: #CCC;" class="just_text"><div class="caption-box">Testimonies</div>Cambridge Design Company have many creative ideas and solutions along with an ability to meet their client's needs. They have also been instrumental in helping keep my ever-changing budget needs in control by offering alternative and appropriate choices.</div>
</div>
    </div>

所有 3 个文本 div 的 CSS

.slider2  position: relative; 
.caption-box 
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: #CCC;
color: #fff;
z-index: 999;

.trigger 
width:200px;
height:200px;

【问题讨论】：

为什么在每个 div 中使用相同的内联样式。您可以将它们命名为同一类，然后在该类中应用这些样式。

@Imran 我没有太多关于 CSS 的知识，但我正在做一个关于企业标识的项目，你能帮我对齐文本吗？

你试过vertical-align: middle;

是的，我有，但你会把它放在哪里？

【参考方案1】：

add the following code in CSS.

它会为内部 <div> 元素添加边距和内边距。

.just_text
padding: 5px;
margin: 7px;

【参考方案2】：

让我知道这是否有效。

我稍微清理了您的代码并添加了一个额外的 div 和类，但关键是使父 div display:table; 和文本 div display:table-cell vertical-align:middle; HTML：

 <div class="trigger">
<div class="slider2">
    <div class="testimony">
        <div class="caption-box">Testimonies</div>
        <div class="just_text">It was quite an eye-opening experience working with CDC. Their accessibility, personal attention to the finest details and willingness to design a website exactly the way I had envisioned was a rewarding experience.</div>
    </div>
    <div class="testimony">
        <div class="caption-box">Testimonies</div>
        <div class="just_text">Thank you Cambridge Design Company! My business was literally going under until Daniel designed me a website that was a built customer machine. Now my business has been revived and I owe it all to you! Highly recommend!</div>
    </div>
    <div class="testimony">
        <div class="caption-box">Testimonies</div>
        <div class="just_text">We really liked the presentation and creative concepts Cambridge Design Company provided and loved the fact that we could work with your interns to achieve our charity goals.</div>
    </div>
    <div class="testimony">
        <div class="caption-box">Testimonies</div>
        <div class="just_text">I couldn't be more pleased with The Cambridge Design Company and their staff. Not only are they relaxed and friendly but they are professional also, the quality of their web work is exceptional.</div>
    </div>
    <div class="testimony">
        <div class="caption-box">Testimonies</div>
        <div class="just_text">Cambridge Design Company have many creative     ideas and solutions along with an ability to meet their client's needs. They     have also been instrumental in helping keep my ever-changing budget needs in     control by offering alternative and appropriate choices.</div>
    </div>
</div>
</div>

CSS：

.slider2 
position: relative;

.testimony 
display:table;
height: 200px;
width: 200px;
position:relative;
border:1px solid #ccccb2;
border-radius: 5px;

.caption-box 
text-align:center;
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: #CCC;
color: #fff;
z-index: 999;

.trigger 
width:200px;
height:200px;

.just_text 
display:table-cell;
vertical-align:middle;
background-image: url(quotegreen.jpg);
background-size: cover;
color: #CCC;