こんにちは。
HTML/CSSで中央揃え(主に縦方向)のやり方の備忘録として記事にします。
誰かの役に立ったら幸いです。
簡単そうに見えて意外にも時間がかりました。
テキストの左右方向の中央寄せ
左右方向の中央寄せは簡単でした。
tex-allign:center
で簡単にできます。
テキストの縦方向の中央寄せ
これは左右と違って面倒でした
色々試して以下で出来ました。
HTML
</html>
<body>
<div class=”test”>
<span class=”target”>this is test<br>this is test</span>
</dvi>
</body>
</hmtl>
CSS
html,body {height:100%;}
div.test{
display:table;
width:100%;
height:100%;
background-color:rgb(135, 219, 252);
text-align:center;
}
div.test .target{
display:table-cell;
vertical-align:middle;
}
html,body {height:100%;}
これをCSSに書いておかないといけないのが注意点。
重要なポイント
・親と子のclassを定義する
・displayでtableを定義する
・vertical-align:middleを定義する
CSSでの中央寄せ方法を理解する上で、まず最初に知っておかなければいけないのは、HTML要素における「インライン」と「ブロック」の考え方です。
デフォルトでインラインレベルの要素なのは、例えば、<a>タグや<span>タグです。
逆にブロックレベルなのは、<div>, <h1>, <p> などです。
「vertical-align」プロパティの指定が有効な要素には、display:inline、display:inline-block、display:table-cell などがあります。
逆に、display:block である要素はこの vertical-align プロパティの適応外。
そのため、blockの要素に対しては縦方向に中央揃えができないのです。
「クエリ送信」を「送信」に変える方法
送信ボタンを作るには、<input>タグにtype属性つけて、値にsubmitを指定します。
が、
表示すると
「クエリ送信」
となっており、見栄え的に「送信」に変更したかったので、その方法を記載します。
<input type=”submit” >
↓
<input type=”submit” value=”送信”>
にするだけです。
以上です。
誰かの役に立てば幸いです。
コメント