5

順序付けられていないリストがあります...

<ul class="hide">
  <li class="home">
    <div class="link">
      <a href="/">Home</a>
    </div>
  </li>
  <li class="about">
    <div class="link">
      <a href="/about">About Our Community</a>
    </div>
  </li>
  <li class="contact">
    <div class="link">
      <a href="/contact">Contact Us</a>
    </div>
  </li>
</ul>

私のCSSは次のようになります....

#sitenav ul li .link a {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;
  margin-top: auto;
  margin-bottom: auto;
}

ただし、マージンはリンクを垂直方向に中央揃えしません

何か案は？

4

3 に答える 3

14

このソリューションはあなたのために働くことができます: http://jsfiddle.net/WLQAS/8/

margin-top: auto;オブジェクトをmargin-bottom: auto;垂直方向に整列させることはできません。

更新された CSS

li {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;    
}

.link {
    vertical-align: middle;
    display: table-cell;
    height: 50px;
}
于 2012-06-13T16:30:52.683 に答える
4

これは、 ：a内の未知の高さの要素を垂直方向に整列させるためのクロスブラウザ互換ソリューションです。div

改行がある場合とない場合のリンクテキストで機能します。

CSS

* { margin: 0; padding: 0 }

ul {}
ul li {
    display: table;
    height: 75px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

ul li div {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

ul li div a {
    #position: relative; /* ie hack */
    #top: -50%; /* ie hack */
    border: 1px solid green
}

ここでCSSハックを使用することはお勧めしません。代わりに、条件付きコメントを使用してください。

ライブデモ： http： //jsfiddle.net/ahdzg/1/
このトリックに関する詳細情報：http ：//www.jakpsatweb.cz/css/css-vertical-center-solution.html

お役に立てれば。それ以外の場合は、お気軽にお問い合わせください。

于 2012-06-13T20:55:41.793 に答える
1 
.parent_div{display:table;}.child_div{display:table-cell;vertical-align:middle;}

次に、リンクを子 div 内に配置します。

于 2018-06-27T20:24:51.583 に答える