[英]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. 我有一个包含图像和文本的父div,它们应垂直对齐:中间,尽管我无法正常工作。 Not sure what I did wrong.
不知道我做错了什么。
Find below my Fiddle 在我的小提琴下面找到
HTML 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 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: 这是在Coda中预览代码时得到的:
If you use display: inline-block
and use vertical-align: middle
on your container divs the content will be vertically aligned correctly. 如果使用
display: inline-block
并使用vertical-align: middle
在容器div的vertical-align: middle
,则内容将正确地垂直对齐。
.social-cont2,
.social-cont1{display: inline-block; vertical-align: middle;}
Edit: Fiddle using table-cell instead 编辑: 改用表格单元格
EDIT: Fiddle with valid image files 编辑: 摆弄有效的图像文件
You don't need float: left
and in fact you don't need .social-cont1
and .social-cont2
, you can style img
and h6
您不需要
float: left
实际上,您不需要.social-cont1
和.social-cont2
,您可以设置img
和h6
样式
.social-cont1 {
display: table-cell;
vertical-align: middle;
}
.social-cont2 {
display: table-cell;
vertical-align: middle;
color: #404040;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.