CSSでフォームのボタンを中央寄せにする方法

CSSでフォームのボタンを中央寄せにする方法

ウェブサイト制作中にフォームのボタンを中央寄せにする必要がありまして「左右のマージンをautoにすればいいんでしょ、ふふふ〜ん」と鼻をほじりながら作業をしていたところ、ボタンはピクリとも動きませんでした。ずっと左端に鎮座しています。

という失敗談から、フォームのボタンの整列のしかたについて解説します。ボタン以外の要素にも応用できます。

目次

なぜ失敗したのか(ブロックレベル要素とインライン要素)

左右のマージンをautoにするのはブロックレベル要素をセンタリングする方法です。そしてフォームのボタンはインライン要素だったのです。

ブロックレベル要素とインライン要素とは何か。

BLOCK
INLINEINLINEINLINE

何も言葉を発せずに表現しきった私を褒めてください。

具体的には、ブロックレベル要素<div> <p> <h1> <form> <table> <ul> <ol> <dl> などなどです。

インライン要素<span> <small> <strong> <code> <label> <input> <select> <textarea> <button> などなどです。

フォームのボタン <input type="submit"> はインライン要素なんです。えー、でもお問合せフォームとか見るとフォームの部品ってブロック要素っぽいですよね。だから私は間違えたんです(言い訳)。

お問い合わせ

インライン要素を整列する方法

フォームの部品はインライン要素であると渋々認めるとして、どうやって中央寄せするのか。text-align を使います。ボタンを <div> などで括って、text-align: center とします。

<div class="wrap">
<input type="submit" value="牡丹">
</div>

<style>
.wrap{
	text-align: center;
}
</style>
このように表示されます

このプロパティ名 text-align紛らわしい。テキストの整列をするためのプロパティかと思うじゃないですか。テキストだけじゃないんですよ。インライン要素を整列するためのものなんですよ。名前を inline-align に変えませんか。インライン・アライン。韻を踏んでてカッコイイ。

だから私は間違えたんです(言い訳2)。

ブロックレベル要素を整列する方法

上のやり方、なんかモヤモヤしませんか。ボタンを <div> で括らないといけないんですよね。なんでも<div>で括る教の信者はそれでいいかも知れませんが、そうでない方のためにおすすめの別の方法があります。ボタンをブロックレベル要素にしてしまえばいいのです。

<input type="submit" value="牡丹" class="button">

<style>
.button{
	display: block;
	margin: auto;
}
</style>
このように表示されます

フレックスボックスを使用して整列する方法

最後に、いちばんオシャレな方法をご紹介します。禁断の果実フレックスボックスです。

要素がブロックでもインラインでも整列できます。横方向だけでなく縦方向にも整列できます。2つ以上の要素をまとめてあっちにやったりこっちにやったり伸ばしたり縮めたりできます。嗚呼恐ろしい。

<div class="wrap">
<input type="submit" value="牡丹">
</div>

<style>
.wrap{
	display: flex;
	justify-content: center;
}
</style>
このように表示されます

3つの要素を均等に並べるには。

<div class="wrap">
<input type="submit" value="牡丹">
<input type="submit" value="薔薇">
<input type="submit" value="チューリップ">
</div>

<style>
.wrap{
	display: flex;
	justify-content: space-between;
}
</style>
このように表示されます

縦に並べて中央寄せ。

<div class="wrap">
<input type="submit" value="牡丹" class="botan">
<input type="submit" value="薔薇" class="botan">
<input type="submit" value="チューリップ" class="botan">
</div>

<style>
.wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.botan{
	margin: 5px 0;
}
</style>
このように表示されます

これを使いこなせるようになったら、プロ・スタイルシーターを名乗ることができるのではないでしょうか。

でわでわ

CSSでフォームのボタンを中央寄せにする方法

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次