图像中心垂直和水平对齐[重复]

Posted

技术标签:

【中文标题】图像中心垂直和水平对齐[重复]【英文标题】:Image center align vertically and horizontally [duplicate] 【发布时间】:2011-07-25 19:21:35 【问题描述】:

嗨,我想放置一个垂直和水平居中对齐的图像, 我的 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;

在做了所有这些事情之后,我无法这样做。请看看并帮助我。

【问题讨论】:

我建议你看看similar question。 【参考方案1】:

有一些很好的方法可以使元素水平和垂直居中,这取决于情况和您的偏好。

使用以下标记:

<div><img src="a.png"  ></div>

行高

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

很好的快速修复,不会过多地混淆positioning,但如果实际上文本以这种方式居中可能会出现问题。

显示:表格单元格

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%; 

topleft 偏移量应设置为被定位元素各自尺寸的一半。如果包含元素需要灵活但需要绝对值才能工作,则效果很好。


所有技术的演示:jsfiddle.net/Marcel/JQbea (fullscreen)

【讨论】:

【参考方案2】:

为什么不直接删除 img 标记,然后将图像设置为 background 并像这样居中:

(内联,但通过外部 css 文件是最好的方法)

<div style="background: url('7-612x612-2.png') no-repeat center center transparent;">&nbsp;</div>

【讨论】:

不,由于我的要求,我不能这样做。 这成功了。谢谢你 如果你想让图片有边框颜色怎么办?

以上是关于图像中心垂直和水平对齐[重复]的主要内容,如果未能解决你的问题,请参考以下文章

使用CSS垂直和水平对齐(中间和中心)[重复]

将元素水平和垂直对齐到页面的中心[重复]

div中的垂直对齐div [重复]

用红色边框水平对齐 div [重复]

水平和垂直对齐 Div [重复]

CSS Flex除单个右水平对齐元素外的所有中心[重复]