Question

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

有人可以告诉我如何垂直对齐文本以及为div添加边距，以便文本不会与边缘对齐。我已经尝试过多种方式使用CSS，但由于某些原因我没有感到高兴。

第1分区的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;
}

Answer 1

<强> add the following code in CSS.

会增加保证金＆amp;填充到内部<div> 元素。

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

Answer 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;
}

垂直中心＆amp;居中对齐文本并为div添加边距？我迷路了

2 个答案: