div内のテキストを縦横に揃えます

-2

div内のテキストを水平方向と垂直方向にどのように揃えますか？私はtext-align：centerと水平に整列することができます。しかし、vertical-alignは機能しません。div内のテキストを縦横に揃えます

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title></title> 
<head> 
    <style> 
     .blocks { 
      width: 200px; 
      height: 100px; 
      border: 1px solid black; 
      text-align: center; 
      vertical-align: center; 
     } 
     #a1 { 
      margin: 0 auto; 
      margin-top: 40px; 
     } 
     #a2 { 
      float: left; 
      margin-left: 25%; 
     } 
     #a3 { 
      float: right; 
      margin-right: 25%; 
     } 
     #a4 { 
      margin: 10% auto 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div class="blocks" id="a1">some text</div> 
    <div class="blocks" id="a2">some text</div> 
    <div class="blocks" id="a3">some text</div> 
    <div class="blocks" id="a4">some text</div> 
    </div> 
</body>

ありがとうございます。

出典

2016-12-28 martinbshp

[**質問**]（http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block）を確認してください。この質問は何百回も聞かれました。質問を投稿する前にいくつかの調査をしてください。 –

あなたはCSSのフレキシボックスを使用することができます。 .blocksフレックスコンテナ&フレックスアライメントプロパティの適用align-items & justify-content。以下のような：このことができます

.blocks { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#a1 { 
 
    margin: 0 auto; 
 
    margin-top: 40px; 
 
} 
 
#a2 { 
 
    float: left; 
 
    margin-left: 25%; 
 
} 
 
#a3 { 
 
    float: right; 
 
    margin-right: 25%; 
 
} 
 
#a4 { 
 
    margin: 10% auto 0; 
 
}

<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1">some text</div> 
 
    <div class="blocks" id="a2">some text</div> 
 
    <div class="blocks" id="a3">some text</div> 
 
    <div class="blocks" id="a4">some text</div> 
 
    </div> 
 
</body>

希望：

.blocks { 
    display: flex; /* Flex Container */ 
    align-items: center; /* Gives Vertical Alignment */ 
    justify-content: center; /* Gives Horizontal Alignment */ 
}

は（使用フルスクリーンモード）以下のスニペットを見てください！

出典

2016-12-28 06:54:23

ありがとうSaurav。私は注意を払い、フレックスボックスで読み上げます。 – martinbshp

使用CSS3のフレキシボックスコンセプト

セット親表示：
セットの子マージンフレックス：オート

それが正常に動作しますが、私は以下のスニペットを追加しています。

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<title></title> 
 
<head> 
 
    <style> 
 
     .blocks { 
 
      width: 200px; 
 
      height: 100px; 
 
      border: 1px solid black; 
 
      text-align: center; 
 
      vertical-align: center; 
 
      display:flex; 
 
     } 
 
     #a1 { 
 
      margin: 0 auto; 
 
      margin-top: 40px; 
 
     } 
 
     #a2 { 
 
      float: left; 
 
      margin-left: 25%; 
 
     } 
 
     #a3 { 
 
      float: right; 
 
      margin-right: 25%; 
 
     } 
 
     #a4 { 
 
      margin: 10% auto 0; 
 
     } 
 
     span{ 
 
     margin:auto;} 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1"><span>some text</span></div> 
 
    <div class="blocks" id="a2"><span>some text</span></div> 
 
    <div class="blocks" id="a3"><span>some text</span></div> 
 
    <div class="blocks" id="a4"><span>some text</span></div> 
 
    </div> 
 
</body>

出典

2016-12-28 06:53:55

div内のテキストを縦横に揃えます

答えて

関連する問題