如何将div对齐到水平和水平中心

我想将div对齐居中。如何将div对齐到水平和水平中心

这样

enter image description here

我已经试过边距，垂直对齐

，但他们也无法正常工作。

我还设置了剩下不到0像素

，但内部的div仍然是一个0像素左

如果我想在div如上图像

如何修改CSS，使其如上图片？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
div 
{ 
    border:solid; 
} 
#outer 
{ 
    position:absolute; 
    height:100px; 
    width:50px; 
    left:50px; 
    top:50px; 
} 
#inner 
{ 
    background:white; 
    height:20%; 
    width:120%; 
    left:-10px; 
    margin-top:auto; 
    margin-buttom:auto; 
    vertical-align:middle; 
} 
</style> 
</head> 
<body> 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 
</body> 
</html>

来源

2012-06-15 CL So

试试这个 - http://jsfiddle.net/vn6Wx/

#inner 
{ 
    background:white; 
    height:40%; 
    width:200%; 
    position: relative; 
    left:-50%; 
    top: 25%; 
    margin-top:auto; 
    margin-buttom:auto; 
    vertical-align:middle; 
}

来源

2012-06-15 18:34:17

检查这个..

http://jsfiddle.net/dmvcs/

#outer{ 
    position:absolute; 
    height:100px; 
    width:50px; 
    left:50px; 
    top:50px; 
    border:2px solid red; 
} 

#inner{ 
    background:white; 
    position:absolute; 
    height:50px; 
    width:100px; 
    top:50%; 
    left:50%; 
    margin-top:-25px; 
    margin-left:-50px; 
    border:2px solid green; 
}

来源

2012-06-15 18:36:49

唯一灵活的方式，垂直对齐的元素，而无需使用JavaScript的是把它在一个表格单元格中。

来源

2012-06-15 18:59:53

你可以试试这个：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <style> 
      html { height:100%; width:100%; } 
      body { background-color: yellow; margin:0; padding:0; } 
      #outer { width:100%; min-height:100%; background-color:red; position:absolute; } 
      #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; } 
     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner"> 
      </div> 
     </div> 
    </body> 
</html>

祝你好运！

来源

2012-06-15 19:31:40 miyijura

如何将div对齐到水平和水平中心

回答

相关问题