左揃えの文字を横幅が自動的に伸縮する中央寄せにする3つの方法 - CSSテクニック - acky.info
HTMLコード <p class="inline"> あいうえお<br> かきくけこさしすせそ<br> たちつてと </p> <p class="block"> あいうえお<br> かきくけこさしすせそ<br> たちつてと </p> <div class="inline-block"> <p> あいうえお<br> かきくけこさしすせそ<br> たちつてと </p> </div> <p class="table"> あいうえお<br> かきくけこさしすせそ<br> たちつてと </p> <div class="flex"> <p>あいうえお<br> かきくけこさしすせそ<br> たちつてと</p> </div> CSSコード main p { background: #CCC; } .inline { text-align: center; } .block { width: 200px;
position:absolute、margin:0 autoして左右中央配置する - not good but great
width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。 ウンチを上下左右中央配置している。 top,left,right,leftをauto以外の値にする 上下左右中央配置にする .iconImage{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin:auto; width:145px; height:145px; background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat; border-radius:10px; } top
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
