html - 縦中央 タグ？

Question

要素のタグを垂直方向に中央揃えするのに苦労しています。

私が持っているのは次のようなものです:

<style>
 header {padding: 20px 0 20px 0; clear: both;}
 header a {
   float: right;
   vertical-align: middle; 
   margin: auto 0 auto 0;
   } 
   //This is what I tried, doesnt work
</style>

<header>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</header>

ヘッダーのタグを修正するための auto ho がわかりません

score 7 · Accepted Answer

line-height プロパティをアンカールールに追加するだけで、コンテナーのパディングと段落のマージンを追加できます。line-height : 50px;

http://jsfiddle.net/HS6Lp/

score 3 · Accepted Answer

aコンテナの他の内容を考慮せずに中央に配置するには、絶対配置を使用します。

header
{
    position:relative;
}
a
{
    position:absolute;
    top: 50%; // nearly 50%, but not exactly 50%
    left: 50%;
}

score 2 · Accepted Answer

これは、display:table; を使用する 1 つの方法です。およびdisplay:table-cell;。実際に中央に表示されるように、div に高さを追加しました。配置と競合するため、フロートも削除しました。

<div>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</div>

CSS:

div {padding: 20px 0 20px 0; clear: both;background:green;display:table;height:200px;}
div a {
display:table-cell;
   vertical-align: middle; 
   margin: auto 0 auto 0;
   }

http://jsfiddle.net/LR6rz/

score 0 · Accepted Answer

header中央揃えのテキストと自動サイドマージンを使用するように親を設定する必要があります。次に、p左揃えのテキストを使用するようにタグを設定します。

<style>
header {
  padding: 20px 0 20px 0; 
  clear: both;
  text-align: center;
  margin: auto 0 auto 0; 
}
header a {

}
header p {
   text-align: left;
}
</style>

<header>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</header>

ユースケースに応じて、タグだけに自動サイドマージンを設定してa、タグで異なるマージンを使用することができますheader。

コードをいじるには、 http://codepen.io/alienresident/pen/fgkvcを参照してください。

html - 縦中央タグ？

4 に答える 4

Related

Reference