关于水平居中的问题

Question

怎么让中间的澳猫水平居中，不受左右两边内容的多少，现在右边放一个的话正好居中，如果放多个的话中间的就是偏。

Answer 1

这个你可以用定位直接做demo

Answer 2

那是因为你的父级本来就没有居中或者没有 100% 宽度，一般来说，这类样式都是父级 100% 宽度，图片民中，左右两边绝对定位的！

我这里写一个简单的示例：

CSS:

#parent{ background-color: #09f; position: relative; padding: 10px; }
#parent h1{ font-size: 20px; text-align:center; margin: 0; }
#parent .left,
#parent .right{ position: absolute; top: 10px; }
#parent .left{ left: 10px; }
#parent .right{ right: 10px; }

HTML:

<div id="parent">

  <div class="left">
    <a href="#">左</a>
  </div>

  <h1>标题文字</h1>

  <div class="right">
    <a href="#">右1</a>
    <a href="#">右2</a>
    <a href="#">右3</a>
  </div>
</div>

http://cssdeck.com/labs/full/gppb1tzn

Answer 3

1.两边用定位
2.第二种方法可以给澳猫一个div，让这个div相对整行居中就行了

<div class="aomao"></div>
css:
.aomao{
   margin:0px,auto;
}

Answer 4

<div style="width:100%;height:50px;">
    <div style="text-align:center">澳猫</div>
</div>

Answer 5

演示

.navigation {
  position: relative;
  overflow: hidden;
  background: #2695ef;
}

.navigation .item {
  float: left;
  padding: 20px 0 20px 20px;
  color: #fff;
  font-size: 20px;
  float: left;
}

.navigation .item + .navigation .item:last-child {
  padding-right: 20px;
}

.navigation .item.right {
  float: right;
}

.navigation .item.logo {
  position: absolute;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  float: none;
}