Question

我意识到这个问题在SO上是重复的。但是这一次所有这些解决方案以及我一直用来实现的解决方案都失败了。我为它道歉。

到目前为止我的HTML代码：

<div class="arrow">
   <hr class="left">
   <img src="http://bit.ly/100X8XQ" height="10" width="10">
   <hr class="right">
<div>

CSS：

.arrow{
margin:0 auto;
}

.left{
float: left;
width: 30%;
}

img{
float: left;
}

.right{
float: left;
width: 30%;    
}

我想对齐div＆＃34; arrow＆＃34;包含页面中心的所有hr＆im和img。

margin:0 auto;

这也无助于我做到这一点。我怎么能这样做？非常感谢任何帮助。

Answer 1

试试这个：

.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
margin: auto;
vertical-align: middle;
background-color: red;
width: 200px;
height: 200px;
}

修改第一个应该现在工作。测试

Answer 2

用.arrow

的容器包裹text-align: center; div

<div class="container">
  <div class="arrow">
    <hr class="left">
    <img src="http://bit.ly/100X8XQ" height="10" width="10">
    <hr class="right">
  <div>
</div>


.container {
    text-align: center;
}
.arrow {
    width: 800px;
    margin: 0 auto;
}

Answer 3

喜欢这个

.arrow{
    width: 50%;
    margin:0 auto;
}

点击此处查看示例：http://jsfiddle.net/4kk6wc39/

将div与页面中心对齐

3 个答案: