Vertical Center & Center align text and add margin to div?我迷路了

Question

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

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

HTML 第一 div

<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>

CSS 所有 3 个文本 divs

.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.

It would add margin & padding to the inner <div> elements.

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

Answer 2

让我知道这是否有效。

我稍微清理了你的代码并添加了额外的 div 和 class 但关键是让父 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;
}

Vertical Center & Center align text and add margin to div?我迷路了

Vertical Center & Center align text and add margin to div? Im lost

html

css

text

vertical-alignment