Created
July 2, 2017 06:26
-
-
Save yano3nora/e15c2993afaa3e94d97b50eaf155dd2b to your computer and use it in GitHub Desktop.
[css: centering] note of css centering without flexbox. #css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
refs: | |
http://youknow.jp/web/css-position | |
http://bashalog.c-brains.jp/11/10/13-200523.php | |
*/ | |
/* absolute の上下左右中央寄せを強引に */ | |
.hoge { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%,-50%); | |
-moz-transform: translate(-50%,-50%); | |
-ms-transform: translate(-50%,-50%); | |
-o-transform: translate(-50%,-50%); | |
transform: translate(-50%,-50%); | |
width:好きな値; | |
height:好きな値; | |
} | |
/* 縦方向の中央寄せ */ | |
/* 1. とりあえずtable-cell+vertical-alignでよくね? */ | |
.hoge { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
/* 縦サイズの1/2だけネガティブマージン */ | |
.hoge { | |
position:absolute; | |
top: 50%; | |
margin-top: -50px ; | |
} | |
/* 複数行かつ行数が決まっている */ | |
.hoge { | |
position:absolute; | |
top: 50%; | |
line-height: 1.8; | |
margin-top: -2.7em; /*(line-height)×(行数)/2 */ | |
} | |
/* heightとline-heightに同じ値を指定(1行のみ) */ | |
.hoge { | |
height: 50px; | |
line-height: 50px; | |
} | |
/* 画像中央寄せ(テキスト1行) */ | |
.hoge img { | |
vertical-align: middle; | |
} | |
/* 画像+テキスト複数行 */ | |
.hoge img { | |
display: inline-block; | |
vertical-align: middle; | |
*zoom: 1; /* for IE6-7 */ | |
*display: inline; /* for IE6-7 */ | |
} | |
.hoge .txt { | |
display: inline-block; | |
vertical-align: middle; | |
width:250px; /* require */ | |
*zoom: 1; /* for IE6-7 */ | |
*display: inline; /* for IE6-7 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment