Struggling to vertically align an image and text in a parent div? Check out my code snippet below:
Here's the link to my Fiddle:
HTML Code Snippet:
<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 Styling:
.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;
}
When previewing the code in Coda, this is the result: