[英]How to Align Vertically the image in a div?
How to display the image as vertical align in div container? 如何在div容器中将图像显示为垂直对齐?
The image "setting.png" placed in last column in the code i attached. 图片“ setting.png”位于我所附代码的最后一列。 please advice solution please.
请建议解决方案。
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp@gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add
只需添加
(space before a link) (链接前的空格)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp@gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution: 更好的解决方案:
add this to css: 将此添加到CSS:
img {
margin-top:10px;
}
Here, this should work: Add this to your div which contains the image that should be centered. 在这里,这应该起作用:将其添加到div中,其中包含应居中的图像。
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains. 无论您的div尺寸或包含的图像尺寸如何,这都应使图像垂直居中。
You can do this with position: absolute; 您可以使用position:absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
如果您知道settings.png图片的尺寸(此示例为20px x 20px)。
Add class tableColSettings to the <a>
around the settings image. 将类tableColSettings添加到设置图像周围的
<a>
。 Then add CSS; 然后添加CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. 无论高度如何,设置图像都将始终位于元素的中心。 Here's a working fiddle: http://jsfiddle.net/384pa/
这是一个有效的小提琴: http : //jsfiddle.net/384pa/
Hope this helps! 希望这可以帮助!
CSS具有标签名称“ vertical-align”,也许您会得到解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.