Can any one explain why the ".name-wrap" div is not aligning with the image in this fiddle.
<!DOCTYPE html>
<html>
<style>
.element-wrap{
display:block;
background:blue
}
.name-wrap{
display:inline-block;
background:yellow
}
.model-name-wrap{
display:block
}
.make-name-wrap{
display:block
}
img{
display:inline-block
}
</style>
<body>
<div class="element-wrap">
<img height="50" width="50" src="https://fbcdn-photos-h-a.akamaihd.net/hphotos-ak-prn1/c8.0.50.50/p50x50/1012747_10100658463725213_1269934886_s.jpg">
<div class="name-wrap">
<div class="model-name-wrap">Honda</div>
<div class="make-name-wrap">Civic</div>
</div>
You need to use vertical-align: middle; for img tag as well as .name-wrap
Relevant CSS which has to be modified :
.name-wrap{
display:inline-block;
background:yellow;
vertical-align: middle;
}
img{
display:inline-block;
vertical-align: middle;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments