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

Question

Hi I am building a website for college but I have no idea how to vertically align the text in the divs that contain text sliders. There is 3 text sliders in a vertical row within my grid layout. You can see the page livelink here

Could somebody please show me how to vertically align the text a well as add a margin to the div its in so the text isn't against the edges. I have tried usig CSS in numerous ways but I am getting no joy for some reason.

HTML of 1st 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 of all 3 text 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;
}

Why are you using same kind of inline style in each div. You can named them as same class then apply those style at that class. — Imran, Apr 10 '15 at 15:58
@Imran I havent been taught much about CSS yet I am doing a project on corporate identity, can you help me align the text though? — Jesus Vasquez, Apr 10 '15 at 16:07

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

add the following code in CSS.

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

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 10 '15 at 16:33

mindfreak

456
3
9
29

score 0 · Accepted Answer · answered Apr 10 '15 at 17:10

Let me know if this works.

I cleaned your code a bit and added an extra div and class but the key is to make the parent div display:table; and the text 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? Im lost

2 Answers2