图像中心垂直和水平对齐 [英] Image center align vertically and horizontally

问题描述

我要放置一个垂直和水平对齐的图像，
我的HTML标记是

 < ul class =big-wrapper> 
< li> 
< div class =fillerstyle =vertical-align：middle; display：inline-block;> 
< img src =7-612x612-2.pngoriginal =/ 7-612x612-2.pngstyle =margin：0pt auto; display：table-cell; text-align：center; vertical-align：middle;> 
< / div> 
< / li> 
< li> 
< div class =fillerstyle =vertical-align：middle; display：inline-block;> 
< img src =7-612x612-2.pngoriginal =/ 7-612x612-2.pngstyle =margin：0pt auto; display：table-cell; text-align：center; vertical-align：middle;> 
 
< / li> 
< / ul> 
 
使用的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.pngwidth =100height =100>< / div> 
  

line-height

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

良好的快速修复，不会影响位置

display：table-cell

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

与旧的表格一样，非常灵活，但只支持现代浏览器。 >

position：absolute

  div {width：300px; height：300px;位置：相对; } 
 div img {top：-50px; left：-50px; position：absolute;保证金：50％0 0 50％; } 
  

顶部和 left 偏移量应设置为要定位的元素的相应维度的一半。

---

演示所有技术：

a href =http://jsfiddle.net/Marcel/JQbea/> jsfiddle.net/Marcel/JQbea （全屏）

Hi I want to place a Image which is center align vertically and horizontally as well, My HTML markup is

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

After doing all those stuff i am not able to do so.Please have a look and help me.

解决方案

There's a few good ways to both horizontally and vertically center an element, it just comes down to the situation and your preference.

With the following markup:

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

line-height

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

Good quick fix without messing with positioning too much but if actually text is being centered this way could be problematic.

display:table-cell

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

Works just like good old tables and highly flexible, however only supported in modern browsers.

position:absolute

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

top and left offsets should be set to half the respective dimensions of the element being positioned. Works well if the containing element needs to be flexible but absolute values are required to work.

---

Demo of all techniques: jsfiddle.net/Marcel/JQbea (fullscreen)

这篇关于图像中心垂直和水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！