11

これは私のコードがどのように見えるかです。

#container {
  width: 584px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

#container ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 3504px;
}

#container ul li {
  width: 584px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
<div id="container">
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

タイトルが示すように、ul を垂直方向に div の中央に配置したいと考えています。上記の CSS ルールを変更できないためです。私は解決策をグーグルで調べて方法を見つけようとしましたが、すべてが私がすでに持っているルールと衝突しているようです.

これを行う方法はありますか？

divの代わりに、#container1 行と 1 列のテーブルを使用した場合に役立ちますか?

4

5 に答える 5

9

今後は検索機能をご利用ください。完全な答えはここで説明されています。これはあなたのシナリオのコードです:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
ul{
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

3 つの要素は次のようにネストする必要があります。

<div class="container">
  <div class="helper">
    <ul><!--stuff--></ul>
  </div>
</div>

http://jsfiddle.net/ovfiddle/yVAW9/

于 2013-04-18T09:54:02.777 に答える
0

jQuery ライブラリを追加できる場合は、これを試すことができます。

$(document).ready(function(){

    // Remove li float
    $("#container ul li").css("float", "none");

    // Get the full height of the UL
    var ulheight = $("#container ul li")[0].scrollHeight;

    // Based on the height of the container being 50px you can position the UL accordingly
    var pushdown = (50-ulheight)/2;
    $("#container ul li").css("top", pushdown);

});
于 2013-04-18T09:23:31.520 に答える
0

これで、親コンテナーを display:flex および align-items:center にすることができます。それはうまくいくはずです。flexbox のプロパティは古いブラウザーではサポートされていませんが。

于 2016-08-28T21:57:20.303 に答える