html – 图像中心垂直和水平对齐

发布时间：2020-12-14 21:40:36 所属栏目：资源来源：网络整理

导读：参见英文答案 How to center an element horizontally and vertically?10个答案嗨，我想放置一个中心垂直和水平对齐的图像，我的HTML标记是 ul class="big-wrapper"lidiv class="filler" style="vertical-align: middle; display: inline-block;" img src="

参见英文答案 > How to center an element horizontally and vertically?10个答案嗨，我想放置一个中心垂直和水平对齐的图像，
我的HTML标记是

<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">

</li>
</ul>

Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}

ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}

做完所有这些事情后，我无法做到这一点。请看看，帮助我。

解决方法

有一些好的方法来水平和垂直居中的元素，它只是归结于这种情况和你的偏好。

使用以下标记：

<div><img src="a.png" width="100" height="100"></div>

行高

div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }

很好的快速修复，而不会弄乱定位太多，但如果实际文本以这种方式居中可能是有问题的。

显示：表小区

div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }

工作就像好的老桌子，非常灵活，但只支持现代浏览器。

位置：绝对

div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

顶部和左侧偏移量应设置为要定位的元素的相应尺寸的一半。如果包含元素需要灵活，但绝对值需要工作，才能正常工作。

演示所有技巧：jsfiddle.net/Marcel/JQbea(fullscreen)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!