0

HTML

<nav class="cf">
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

CSS

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: red;
}

nav {
  background: grey;
  text-align: center;
}

nav ul {
  font-size: 0px;
  text-align: right;
}

nav li {
  font-size: 14px;
  display: inline;
}

nav li a {
  display: inline-block;
  width: auto;
  background: green;
}

.logo {
  font-size: 33px;
  background: orange;
  float: left;
}

フィドル
http://jsfiddle.net/M9Sdd/

質問（赤い背景）を（灰色の背景）の内側に垂直
に中央揃えするにはどうすればよいですか？ulnav

4

2 に答える 2

3

他の要素を追加せずにこれを使用することもできます。

nav {
    display: table;
    width: 100%;
}

ul {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 100%;
}

*注：Chromeでのみコードをテストできます。

http://jsfiddle.net/RfF7t/

于 2013-01-24T00:23:41.603 に答える
0

ulの周りにラッパーを追加して、テーブルセルと垂直方向の中央揃えにします。

http://jsbin.com/otucom/4/edit

于 2013-01-24T00:08:03.763 に答える