1. KAMEch

    Posted

    KAMEch
Changes in title
+CSSで中央寄せの方法いろいろメモ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,277 @@
+CSSで中央寄せあれこれをメモ。
+# text−alignで横方向中央寄せ
+インラインの子要素を左右中央寄せにします。
+![inlinecenter.jpg](https://qiita-image-store.s3.amazonaws.com/0/94901/8353294d-fb18-a130-b152-77ac0194821d.jpeg)
+
+```
+.center{
+ border: 1px solid #aaa;
+ width: 400px;
+ text-align: center;
+}
+```
+```
+<div class="center">
+ <p>インライン要素</p>
+</div>
+```
+ブロック要素は中央寄せにならないので、display: inline-block;でインラインにしてあげます。
+
+# margin: autoで中央寄せ
+margin: auto;を使って上下左右中央寄せにします。
+※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。
+![スクリーンショット 2015-10-01 20.44.25.png](https://qiita-image-store.s3.amazonaws.com/0/94901/b927823f-9420-56df-f141-334c28d7bc72.png)
+
+```
+.parent{
+ border: 1px solid #aaa;
+ position: relative;
+ height: 200px;
+ width: 300px;
+}
+.inner{
+ border: 1px solid #aaa;
+ width: 150px;
+ height: 50px;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ margin: auto;
+}
+```
+```
+<div class="parent">
+ <div class="inner">
+ ブロック要素
+ </div>
+</div>
+```
+横方向のみであれば、position:absolute;はいりません。
+縦方向を中央寄せする場合、position:absolute;と、
+top,bottom,left,rightそれぞれにauto以外の値を指定する必要があります。
+
+
+# paddingで中央寄せ
+paddingで中央寄せ。
+高さ、幅の指定がない場合のみ有効。
+
+![スクリーンショット 2015-10-07 17.49.19.png](https://qiita-image-store.s3.amazonaws.com/0/94901/0e028677-584b-2383-662c-5c0353398879.png)
+
+
+```
+.padding{
+ border: 1px solid #aaa;
+ padding: 20px 40px;
+}
+```
+
+```
+<div class="padding">
+ padding
+</div>
+```
+
+# line-heightで中央寄せ
+heightの値と、line-heightの値を同じにする必要があります。
+また、子要素が2行以上になると、親要素からはみ出してしまいます。
+
+![スクリーンショット 2015-10-07 17.56.50.png](https://qiita-image-store.s3.amazonaws.com/0/94901/f8f60aaf-f369-4dc2-5384-c90bbf8fbc25.png)
+
+```
+.lineheight{
+ border: 1px solid #aaa;
+ margin: 20px;
+ height: 100px;
+ line-height: 100px;
+}
+```
+
+```
+<div class="lineheight">
+ <p>display:table-cell;</p>
+</div>
+```
+
+# table-cellで中央寄せ
+table-cellにすると、marginが効かなくなってしまうので、
+marginを効かせたり、左右を中央寄せにする場合は、それようのdivで囲ってしまう。
+![スクリーンショット 2015-10-07 18.03.57.png](https://qiita-image-store.s3.amazonaws.com/0/94901/af74f7db-15e0-ab13-ccf7-a950be4d4960.png)
+
+```
+.parent{
+ border: 1px solid #aaa;
+ padding: 10px;
+ text-align: center;
+ width: 400px;
+}
+.inner{
+ display:inline-block;
+ padding:10px;
+ border: 1px dashed #ccc;
+}
+.tablecell{
+ border: 1px solid #aaa;
+ text-align: center;
+ display: table-cell;
+ vertical-align: middle;
+ width: 200px;
+ height: 250px;
+ margin: 20px;
+}
+```
+```
+<div class="parent">
+ <div class="inner">
+ <div class="tablecell">
+ <p>table-cellで中央寄せ</p>
+ </div>
+ </div>
+</div>
+```
+
+# transformで中央寄せ
+要素を親要素topから50%に配置、すると子要素のtopが親要素の中央位置にくるので、
+子要素を自身の高さの半分マイナス上にずらす(transform: translateY(-50%))と、縦のセンタリングができます。
+※親要素の高さが決まっている時のみ適用される。
+
+横方向の場合は left:50%; 、 transform: translateX(−50%); を使います。
+![スクリーンショット 2015-10-07 18.09.12.png](https://qiita-image-store.s3.amazonaws.com/0/94901/46244246-20b3-73e5-9bad-602192619dfd.png)
+
+```
+.parent{
+ width: 400px;
+ height: 200px;
+ border: 1px solid #aaa;
+ padding: 20px;
+ margin: 20px;
+ position: relative;
+}
+.inner{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translateY(-50%) translateX(-50%);
+ transform: translateY(-50%) translateX(-50%);
+ padding: 20px;
+ border: 1px solid #ccc;
+}
+```
+```
+<div class="parent">
+ <div class="inner">
+ <p>transformで中央寄せ</p>
+ </div>
+</div>
+```
+
+# flexboxで中央寄せ
+
+モダンブラウザ専用で作るならとても簡単ですが、
+古いブラウザバージョンでは実装された仕様が違ったり、ベンダープレフィックスが必要。
+
+プロパティも多いので詳しくはflexboxについて調べてくださいw
+
+![スクリーンショット 2015-10-07 18.14.03.png](https://qiita-image-store.s3.amazonaws.com/0/94901/14766fbe-f434-9407-1713-d8b44a13c825.png)
+
+```
+.flexbox{
+ display: -webkit-flex;
+ display: flex;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-align-items: stretch;
+ align-items: stretch;
+ border: 1px solid #aaa;
+ text-align: center;
+ height: 150px;
+ padding: 10px;
+ margin: 20px;
+}
+```
+```
+<div class="flexbox">
+ <p>flexboxで<br>要素の中央寄せ<br>display: flex;</p>
+ <p>横並び<br>flex-direction:row</p>
+ <p>中央寄せ(横)<br>justify-content: center;</p>
+ <p>中央寄せ(縦)<br>align-items: center;</p>
+</div>
+```
+
+# 画像と隣接テキストの中央寄せ
+## flexboxを使う
+![スクリーンショット 2015-10-07 18.23.47.png](https://qiita-image-store.s3.amazonaws.com/0/94901/ca29c956-f1ff-63df-60e5-e102dd43f580.png)
+
+こんな組み合わせを良く使うのでメモ
+imgと、見出し+テキストを囲んだdivをflexboxで中央寄せにします。
+
+```
+.parent{
+ width: 300px;
+ margin: 10px 20px;
+ padding: 10px;
+ border: 1px solid #aaa;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ align-items: center;
+}
+.inner{
+ border: 1px dashed #ccc;
+ padding: 5px;
+ margin: 0 10px;
+ width: 240px;
+ display: inline-block;
+}
+```
+```
+<div class="parent">
+ <img src="img/c.png" alt="画像">
+ <div class="inner">
+ <h3>見出し</h3>
+ <p>画像とテキストを両方縦で中央寄せ</p>
+ <p>見出し+複数行</p>
+ </div>
+</div>
+```
+
+## table-cellを使う
+![スクリーンショット 2015-10-07 18.28.38.png](https://qiita-image-store.s3.amazonaws.com/0/94901/5a0a8f47-686b-8f5f-1907-f9cf99583a5b.png)
+
+```
+.parent{
+ width: 300px;
+ margin: 10px 0;
+ padding: 10px;
+ border: 1px solid #aaa;
+ position: relative;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.img{
+ vertical-align: middle;
+}
+.inner{
+ width: 220px;
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 10px;
+}
+```
+
+```
+<div class="parent">
+ <img src="image.png" alt="">
+ <div class="inner">
+ <h3>見出し</h3>
+ <p>画像とテキストを両方縦で中央寄せ2</p>
+ <p>画像とテキストを両方縦で中央寄せ2</p>
+ </div>
+</div>
+```
+
+中央寄せは良く使うけど、こうしてみると方法が色々ありますね。
+どの方法を適用するか、悩むものです。
+