0

私はこのコードをオンラインで入手し、min-height div を持つ必要性を満たしています。しかし、コンテンツを垂直方向に中央揃えにすることも必要です。誰か助けてくれませんか？これらのフォーラムで提供されている多くのオプションを試しましたが、この特定の css と組み合わせて使用​​することはできません。そして、min-height div を取得するために使用する必要があるこの特定の css。

<html><style type="text/css">
  .prop {
    float:right;
    width:1px;

  }

  #footer {
    clear:both;
    border-top:2px solid #000000;
    text-align:left;
    font-size:80%;
  }

  .min200px {
    height:200px;
  }
  </style>
</html>
<body>

<div>
  <div class="prop min200px"></div>

I want this content to be vertically center aligned

  <div id="footer">
    Copyight 2012 - xyz
  </div>
</div>



</body>
4

4 に答える 4

1

テキストをどの要素にもラップしていません。そうなると大変なことになります。

テキストを子要素に保持し、要素の高さに等しい値で親要素にdisplay:inline-block; vertical-align:middle; も与えます。line-heightその後、line-height値が子要素に継承されるときに、子要素にも渡しline-heightて見栄えを良くします。

変更された HTML:

<div>
    <div class="prop min200px">
        <div>I want this content to be vertically center aligned</div>
    </div>
    <div id="footer">Copyight 2012 - xyz</div>
</div>

変更された CSS :

.prop{
    line-height:200px;
}
.prop>div{
    line-height:20px; /* or  1em */
    display:inline-block;
    vertical-align:middle;
}

働くフィドル

参考までに、あなたはmin-heightプロパティを使用していると述べました。しかし、コードのどこにも使用していません。(そのプロパティ名のクラス名を宣言したところです)。

于 2013-03-29T08:18:45.210 に答える
0 
<div>

この コンテンツ を 縦 中央 揃え に し
たい






Copyright 2012 - xyz

于 2013-03-29T08:50:09.157 に答える
0

これにはjavascript/jQueryを使用します。これは正しい方向にあなたを指摘するためだけです

<div id="center">
  <div class="prop min200px"></div>
  I want this content to be vertically center aligned
  <div id="footer">
      Copyight 2012 - xyz
  </div>
</div>

<script type="text/javascript">
    var wh= window.height,
        h= $('#center').height(),
        x = (wh-h)/2;
    $('#center').css({"marginTop":"x"})
</script>

これが何をするか: ウィンドウの高さと div の高さをチェックします。それは互いに減算します。その後、この値は 2 で除算されます (上部と下部の間の等間隔)。margin-top はこれによって変更されるため、等間隔になります。これはdivの中心を固定位置にしないので（スクロールしても変化します）、それを変更したい場合は、CSSを調整して固定する必要があります。

于 2013-03-29T08:24:17.137 に答える