html - 垂直居中和居中对齐文本并为 div 添加边距？我迷路了

Question

<分区>

Answer 1

让我知道这是否有效。

我稍微清理了你的代码并添加了一个额外的 div 和类，但关键是使父 div display:table; 和文本 div display:table-cell vertical-对齐:居中； 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;
}