0

可変サイズの div を中央に配置するための多くの回答を見つけましたが、可変サイズの div内に div を中央に配置したいと考えています。私はこの問題について何の助けも見つけることができませんでした.

基本的に、私のラッパーは 2 つの列に分かれています。固定幅の左のものと、画面の残りの部分を埋めることになっている右のもの。私はこれを解決しました。

ここで、右の列の中央 (垂直と水平の両方) に別の div を配置したいと思います。ここに私の目標の図があります。

これは私がこれまでに持っているものです:

HTML:

<div class="wrapper">
  <div class="header">     
  </div>
  <div class="right">
    <section role="main">
      <article>
        <h1>Title</h1>
          <p>Paragraph</p>
      </article>
    </section>
  </div>
</div>

以下：

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #333;
    font: normal normal 12px/18px @font;
    color: @text;   
}

.wrapper {
    width: 100%;
  min-width: 800px;
    height: 100%;
}

.header {
    float: left;
    width: 250px;
    height: 100%;
    background: @c2;
}

.right {
  margin-left: 250px;
    background: @c1;
    height: 100%;

    article {
    height: 300px;
        width: 500px;
        background: #fff;
    }

}

私の目標は、黄色がかった要素の真ん中にある白い article 要素を取得することです。

私が試したこと：

  • display:table -emergentweb.com/test/valign.html にあるテクニック
  • ゴーストチャイルド -css-tricks.com のテクニックの泉

これは可能ですか？

JS / jQuery は特に気にしませんが、使用したくありません。

4

1 に答える 1

0

このcssプロパティを追加してみてください

.right article{
margin:auto;
}

または、これを行うことができます。

中央に配置する div が 500px の場合は、これを行います。

親divに適用position:relativeし、中央に適用したいde divに適用します

.right article{
position:absolute;
left:50%;
margin-left:-250px;
}

このメカニズムは、垂直センタリングにも機能します。

于 2013-06-25T12:33:43.300 に答える