ホーム(記事一覧)へ

html・CSSでボタンなどを右寄せや中央寄せにする方法5選

「ふつうにボタンを作ると左寄せになってしまう。ボタンを右寄せや中央寄せに位置調整するにはどうするの?」

というあなたへ、html・CSSで位置調整のため、ボタン・画像・テキストを右寄せや中央寄せにする方法を5種類解説します。

要素がインラインなのかブロックなのかで右寄せや中央寄せの方法が変わるため要注意です。

インライン要素ブロック要素について詳しくはこちら↓

インライン要素の場合:親にtext-align

aタグやimg(画像)、span(テキスト)、inputタグなどは通常インライン要素です。

インライン要素の場合は親要素に「text-align」を指定しましょう。

text-alignは子要素かつインライン要素の並びを指定するCSSです。

右寄せ text-align:right

text-align:rightを指定すると右寄せになります。

画像

テキスト

<style>
.example{
    /*コレ*/text-align: right;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
</style>
<div class="example">
    <button>ボタン</button>
</div>
<div class="example1-r">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example1-r">
    テキスト
</p>

中央寄せ text-align:center

text-align:centerを指定すると中央寄せになります。

画像

テキスト

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
</style>
<div class="example">
    <button>ボタン</button>
</div>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example">
    テキスト
</p>

ブロック要素の場合:margin

inputやimgタグ、aタグの初期状態はインライン要素です。これに「display: block」を指定するとブロック要素にできます。

ボタンがブロック要素の場合は自身に「margin」とautoを指定しましょう。右寄せか中央寄せで少し方法が違うので注意です。

ブロック要素にすることでボタンらしい装飾がしやすくなります。

右寄せ margin-left:auto

<style>
.example2 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    /*コレ*/margin-left: auto;
    text-align: center;
}
.example2{
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
</style>
<div class="example2">
    <a href="#">ボタン</a>
</div>

margin-left:autoを指定すると要素の左側を自動で最大の隙間を空けてくれます。

これにより右寄せにできます。

margin-rightはauto以外の値を指定しましょう。margin-right:autoを指定すると中央寄せになってしまいます。

中央寄せ margin:auto

<style>
.example2 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    /*コレ*/margin: auto;
    text-align: center;
}
.example2{
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
</style>
<div class="example2">
    <a href="#">ボタン</a>
</div>

margin:autoは左右のmargin(隙間)を自動調整します。

つまり左右中央寄せすることができます。

厳密には「margin:0 auto 0 auto」という状態です。

margin-topとmargin-bottomのautoは0なので「margin:auto」でOKです。

中央寄せの注意点として、「ブロック要素であること」「widthがautoや100%でないこと」があげられます。詳しくは下記をご覧ください。

なんでも:flexとjustify-content

インライン要素でもブロック要素でも位置調整できるのがdisplay:flexです。

display:flexは親要素に設定します。

そして横位置を調整するのはjustify-contentです。

flexについて詳しくはこちら↓

右寄せ justify-content:flex-end

justify-content:flex-endを指定すると中央寄せになります。

画像

テキスト

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
.example3 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    text-align: center;
}
</style>
<div class="example3">
    <a href="#">ボタン</a>
</div>
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example3">
    テキスト
</p>

中央寄せ justify-content:center

justify-content:centerを指定すると中央寄せになります。

画像

テキスト

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
.example3 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    text-align: center;
}
</style>
<div class="example3">
    <a href="#">ボタン</a>
</div>
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example3">
    テキスト
</p>

任意の位置移動:position: absolute

特定の位置に固定したいならposition: absoluteが便利です。

親要素にposition: relativeを指定し、自身にposition: absoluteを指定します。その後topやleftで位置調整します。

positionは扱いが少し難しいので要注意です。

右寄せ right:0

rightは右からの位置を指定できるCSSです。任意の数値にしましょう。

leftは未指定かautoを指定しましょう。

画像

テキスト

<style>
.example4-r{
    /*コレ*/position: relative;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
    height: 50px;
}
.example4-r>*{
    /*コレ*/position: absolute;
    right: 0;
    top: 0;
}
.example4-r a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    text-align: center;
}
</style>
<div class="example4-r">
    <a href="#">ボタン</a>
</div>
<div class="example4-r">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example4-r">
    <span>テキスト</span>
</p>

中央寄せ margin: auto

中央寄せはright: 0とleft: 0とmargin: autoを指定します。

結局margin: auto同様widthの指定が必要ですのでインライン要素にはむきません。

画像
<style>
.example4{
    /*コレ*/position: relative;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
    height: 50px;
}
.example4>*{
    /*コレ*/position: absolute;
    /*コレ*/right: 0;
    /*コレ*/left: 0;
    /*コレ*/margin: auto;
    top: 0;
}
.example4 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    text-align: center;
}
</style>
<div class="example4">
    <a href="#">ボタン</a>
</div>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>

回り込みなどに:float

floatで右寄せもできます。親要素にoverflow: hiddenを指定するか、弟要素にclear:bothを指定しないと崩れるため要注意です。

テキストが兄弟要素にある場合重ならず回り込むことができるのが特徴です。

右寄せ float: right

右寄せするには自信にfloat: rightを指定します。

画像

テキスト

<style>
.example5-r{
    /*コレ*/overflow: hidden;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
    margin-top:10px;
}
.example5-r>*{
    /*コレ*/float: right;
}
.example5-r a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    text-align: center;
}
</style>
<div class="example5-r">
    <a href="#">ボタン</a>
</div>
<div class="example5-r">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="画像" width="100">
</div>
<p class="example5-r">
    <span>テキスト</span>
</p>

中央寄せ なし

floatはleftとrightしかなく中央寄せはありません。

margin:autoですら効きません。

まとめ

右寄せ中央寄せ
インライン
要素
親にtext-align:right親にtext-align:center
ブロック
要素
margin-left:auto;
margin-right:0;(auto以外)
margin:auto
なんでも親にdisplay:flex;
justify-content:flex-end
親にdisplay:flex;
justify-content:center
任意の
位置に
親にposition:relative
自身にposition:absolute;
right:0;
親にposition:relative
自身にposition:absolute;
right:0;
left:0;
margin:auto;
width:○○
回り込み親にoverflow:hidden
または弟にclear:both
自身にfloat: right
なし

以上、html・CSSで位置調整のため、ボタン・画像・テキストを右寄せや中央寄せにする方法を5種類解説しました。

関連記事