divの内側にボタンやテキストを水平に配置するにはどうすればよいですか？

Question

このHTMLはdisplay：table-cellを使ってグリッドの一部です。 divの幅が内容よりも広い：

<div>123</div> 
<div><button>1</button></div> 

大きなdivの中にテキストとボタンを入力するにはどうすればよいですか？

Answer 1

.centeredFlex { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 600px; /* whatever you want... */ 
 
    width: 100%; /* whatever you want... */ 
 
}

<div class="centeredFlex"> 
 
    <button>1</button> 
 
</div>

フレックスボックスをご覧ください：http://www.w3schools.com/css/css3_flexbox.asp！

Answer 2

flex-boxはあなたが水平方向の中心をしたくない場合はalign-items: centerを削除することができますし、垂直方向の中心を望んでいないjustify-content: centerを削除することができ

.container{ 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t flex-direction: column; 
 
\t height: 100vh; 
 
\t background: brown; 
 
}

<div class="container"> 
 
\t <p>Text at center</p> 
 
\t <button>button</button> 
 
</div>

最善の解決策にある