CODEWITHSUNDEEP
htmlcss
user3231901
user3231901

Reputation: 77

vertical align image and text in div

I have a parent div which includes an image and text and they should be vertically aligned: middle, though I do not get it to work. Not sure what I did wrong.

Find below my Fiddle

jsfiddle

HTML

<div class="social-cont">
    <div class="social-cont1">
        <img src="img/contact1.png" alt="contact1" width="21" height="30" />
    </div> <!-- end social-cont1 -->
    <div class="social-cont2">
        <h6 class="social-context">Pastoor de Leijerstraat 29, 5246JA, Hintham</h6>
    </div> <!-- end social-cont1 -->

</div> <!-- end social-cont -->

<div class="social-cont">
    <div class="social-cont1">
        <img src="img/contact3.png" alt="contact3" width="23" height="24" />
    </div> <!-- end social-cont1 -->
    <div class="social-cont2">
        <h6 class="social-context">XXXXXXXXXXXXXX</h6>
    </div> <!-- end social-cont1 -->
</div> <!-- end social-cont -->

CSS

.social-cont {
    height: 100%;
    width: 350px;
    border-bottom: 1px solid #c1c1c1;
    display: table;
    background-color: salmon;
}

.social-cont1 img {
    display: table-cell;
    vertical-align: middle;
    float: left;
}

h6.social-context {
    display: table-cell;
    vertical-align: middle;
    color: #404040;
    float: left;
}

This is what I get when previewing the code in Coda:

This is what I get when previewing the code in Coda

Upvotes: 1

Views: 2160

Answers (2)

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2621

If you use display: inline-block and use vertical-align: middle on your container divs the content will be vertically aligned correctly.

Fiddle Here

.social-cont2,
.social-cont1{display: inline-block; vertical-align: middle;}

Edit: Fiddle using table-cell instead

EDIT: Fiddle with valid image files

Upvotes: 1

Naele
Naele

Reputation: 530

You don't need float: left and in fact you don't need .social-cont1 and .social-cont2, you can style img and h6

.social-cont1 {
    display: table-cell;
    vertical-align: middle;
}

.social-cont2 {
    display: table-cell;
    vertical-align: middle;
    color: #404040;
}

http://jsfiddle.net/fwshE/3/

Upvotes: 3

Related Questions