【CSS/html】inputを上寄せ,中央寄せ,下寄せする方法

「テキストボックスと単位を並べて下寄せしたい」

「項目名とテキストボックスを並べて上寄せしたい」

inputを上寄せ,中央寄せ,下寄せする方法を解説します。

【兄弟で並んでいるとき】自身にvertical-align

兄弟要素として並んでいる場合、並べる要素自体にvertical-alignを指定します。

文字には上下にline-heightの値に応じて空白ができます。

ピッタリそろえるなら「line-height:1」にします。

【上寄せ】vertical-align:top

<style>
.example>*{
    vertical-align: top;
    line-height: 1;
}
</style>
<div class="example">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【中央寄せ】vertical-align:middle

<style>
.example2>*{
    vertical-align: middle;
}
</style>
<div class="example2">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【下寄せ】vertical-align:bottom

<style>
.example3>*{
    vertical-align: bottom;
    line-height: 1;
}
</style>
<div class="example3">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【tableで囲っているとき】tdにvertical-align

tdにvertical-alignを指定すると子要素の位置を調整できます。

ただし、td内で兄弟要素を横並べにしている場合はやはりその要素自身にvertical-alignを指定する必要があります。

【上寄せ】vertical-align:top

項目名

<style>
.example4 td{
    vertical-align: top;
    line-height: 1;
}
</style>
<table class="example4">
    <tr>
        <td>項目名</td>
        <td><input type="text" value="inputテキストボックス"></td>
    </tr>
</table>

【中央寄せ】vertical-align:middle

項目名

<style>
.example5 td{
    vertical-align: middle;
}
</style>
<table class="example5">
    <tr>
        <td>項目名</td>
        <td><input type="text" value="inputテキストボックス"></td>
    </tr>
</table>

【下寄せ】vertical-align:bottom

項目名

<style>
.example6 td{
    vertical-align: bottom;
    line-height: 1;
}
</style>
<table class="example6">
    <tr>
        <td>項目名</td>
        <td><input type="text" value="inputテキストボックス"></td>
    </tr>
</table>

【display:flexで並べているとき】align-items

親要素にdisplay:flexを指定すると子要素を横並べできます。

その状態でalign-itemsを指定すると縦方向の位置調整ができます。

vertical-alignとは値が違うため気を付けましょう。

【上寄せ】align-items:flex-start

<style>
.example7{
    display: flex;
    align-items: flex-start;
    line-height: 1;
}
</style>
<div class="example7">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【中央寄せ】align-items:center

<style>
.example8{
    display: flex;
    align-items: center;
}
</style>
<div class="example8">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【下寄せ】align-items:flex-end

<style>
.example9{
    display: flex;
    align-items: flex-end;
    line-height: 1;
}
</style>
<div class="example9">
    <input type="checkbox">
    <input type="text" value="inputテキストボックス"> <span>単位</span>
</div>

【まとめ】inputを上寄せ,中央寄せ,下寄せする方法

【兄弟で並んでいるとき】自身にvertical-align

• 【上寄せ】vertical-align:top
• 【中央寄せ】vertical-align:middle
• 【下寄せ】vertical-align:bottom

【tableで囲っているとき】tdにvertical-align

• 【上寄せ】vertical-align:top
• 【中央寄せ】vertical-align:middle
• 【下寄せ】vertical-align:bottom

【display:flexで並べているとき】align-items

• 【上寄せ】align-items:flex-start
• 【中央寄せ】align-items:center
• 【下寄せ】align-items:flex-end