Question

试图让它以某种方式垂直居中它不想要，即使我将标签包装在另一个元素中，我也看不到任何方法然后我仍然有问题居中。

div {
    background-color:#00aa00;
}

.menu {
    display:inline-block;
    list-style:none;
    margin:0;
}

.menu li {
    background-color:#aa0000;
    float:left;
}
<ul class="menu">
   <li>
      <a href="#">HOME</a>
   </li>
   <li>
      <a href="#">Rock <hr/> News</a>
   </li>
</ul>

http://jsfiddle.net/Z2fTj/

Answer 1

垂直和水平居中对齐......

Fiddle

对于垂直居中对齐，您应该使用display: table-cell;（在您的子元素中）和display: table;（在您的父元素中）。

对于Horizontol中心对齐，您应使用text-align: center;中的.menu并在div中指定宽度。

div {
    background-color:#00aa00;
    height: 80px;
    width: 100%;
    display: table;
}

.menu {
    list-style: none;
    margin:0;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.menu li {
    background-color:#aa0000;
    margin-left:10px;
    display: inline-block;
}

使用css水平居中菜单按钮

1 个答案: