Text Align Issues using Divs

Question

I'm trying to get the text in this div table/columns/rows to be middle aligned with the images corresponding to each sentence. But so far, all it is giving me is more of a top aligned feel. Could anyone help me with this?

CSS:

.div-table {
    display:table;
    width:776px;
    height: auto;
    background-color:#eee;
    border:1px solid #666666;
    border-spacing:5px;
    /*cellspacing:poor IE support for  this*/
    clear: both;
}
#image-middle {
    vertical-align: middle;
    float: left;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.div-table-row {
    display:table-row;
    width: 776px;
    float: left;
    clear: both;
}
.div-table-col-first {
    display:table-column;
    width:49%;
    float: left;
}

HTML:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div>
        <div class="div-table-col-first">Second Column Headline
            <br />
            <img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
        <div class="div-table-col-first">
            <img id="image-middle" alt="Pie Chart">Third Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div>
    </div>
</div>

Below is a JSFiddle generated by the above markup.

JSFiddle

There is so much wrong here that I don't even know where to begin. Your html needs to be structured better. Removing the
etc. oh yes, and a [fiddle](http://jsfiddle.net) would be nice — feitla, Jul 07 '14 at 20:02

VikingBlooded · Accepted Answer · 2014-07-07T20:14:22.723

First, wrap the image and the text separately (http://jsfiddle.net/L9FnJ/) This is to get you started, I'll not clean up all of your code or do all of the work, but this should tell you how to do it.:

<body>
    <div class="div-table">
        <div class="div-table-row">
            <div  class="div-table-col-first">
                <div class="colImg"><img width="50" height="50" id="image-middle" /></div><div class="colText">First Image Text in the first column and sentence</div>
            </div>
            <div  class="div-table-col-first">Second Column Headline<br />
                <img alt="Checkbox" width="30" height="30"  id="image-middle">First Image Second Column Text<br />
                <br />
                <img  id="image-middle" alt="Padlock in a circle"> Second Image Second Column Text                </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col-first"><img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
            <div class="div-table-col-first"><img  id="image-middle"  alt="Pie Chart">
                Third Image Second Column Text<br />
                <br />
                <img  id="image-middle" alt="A Cover for a Safe"> Fourth Image First column Text</div>
        </div>
    </div>
</body>
</html>

Then, in your css, add this:

.colImg, .colText {
display: table-cell;
vertical-align: middle;
}

Viking, THANK YOU! I didn't want my hand held and the little info you provided was more than enough for me to fix a whole page. I just needed to see it a little differently. Can you tell I'm relatively new to HTML? Ugh! I'll make sure to sacrifice 1000 goats in your honor. — user3813799, Jul 07 '14 at 20:36

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

You definitely need to wrap your text within elements, and see @feitla's comment. I have found that this works:

<div style="display: table; height: 400px; overflow: hidden;">
 <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
 </div>
</div>

See this previously asked question.

edited May 23 '17 at 12:20

Community

1
1

answered Jul 07 '14 at 20:09

BigCheesy

108
1
7

Text Align Issues using Divs

2 Answers2