3

この場合、2 つのボタンと 1 つの段落のコンテンツを含む div があります。CSS を変更して、その div 内のすべての要素とコンテンツを垂直方向と水平方向に揃えたいと考えています。これどうやってするの？

<style>
  .middle {
    What to type in here?
  }
</style>

<div class="middle">
  <p>Hello</p>
  <br />
  <input type="button" value="Button 1">
  <br />
  <input type="button" value="Button 2">
</div>
4

2 に答える 2

1

html を次のように変更します。

<div class="middle">
    <div id='mydiv'>
       <p>Hello</p>
       <input type="button" value="Button 1" />
       <input type="button" value="Button 2" />
    </div>
</div>

そしてあなたのCSSへ

.middle
{
padding: 0;
}

#mydiv
{
display: table;
margin: 0 auto;
}

#mydiv *
{
display: block;
}

input[type='button']
{
margin: 0;
}

作業フィドル: http://jsfiddle.net/n6522/1/

PS。境界線と幅は、アイデアを提供するためのものです。最初のブロックを追加する必要はありません。

于 2013-07-01T15:33:15.387 に答える
0

このスタイルを確認してください:

/* stretch them to window's height */
html, body {
    height:100%;
}

/* normalize them from default 8px to zero */
html, body, div, p {
    margin:0;
    padding:0;
}

/* vertical align */
 body {
    display:table;
    width:100%;
    overflow:auto;
}
.middle {
    display:table-cell;
    vertical-align:middle;
}

/* horizontal align */
.middle {
    text-align:center;
}

jsfiddle #1

または、すべての html コードを何らかのコンテナーに入れて、タグdivの代わりにスタイルを設定することもできます。body

jsfiddle #2

完全を期すために、次のように、.middle分割のコンテンツが中央に配置され、その高さが.middleその内部コンテンツに依存する最も単純なスタイルを、上下のパディングを同じにして作成できます。

.middle {
    padding:5em 0;
    text-align:center;
}

jsfiddle #3

于 2013-07-01T17:07:58.450 に答える