floatで横並べにしたものを中央に配置したい

2016年11月6日カテゴリー : CSS コメント : 0

　リストなどのブロック要素を横並びにするには float や inline-block を使うと思いますが、これら横並びにしたものをまとめて中央に配置したいことがあると思います。幅が決まっている場合にはそれほど難しくないのですが、ページネーションのような記事数によって横幅が変化するものの場合、結構難易度が上がります。

幅が固定されているなら簡単

まずは float を使って横並べしたものを中央寄りにする場合を考えてみます。少しページネーションを意識してデザインしてみました。

20161106_2_1

HTML と CSS は次のようになります。

<div class="test">
    <div class="parent">
        <ul class="pagination">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">6</a>
            </li>
        </ul>
    </div>
</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

.test {
    width: 500px;
    height: 150px;
    border: 1px solid #AAA;
}

.parent {
    overflow: hidden;
}

.pagination {
    list-style: none;
}

.pagination li {
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #FF9900;
    margin-right: 10px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    text-decoration: none;
}

.test {

width: 500px;

height: 150px;

border: 1px solid #AAA;

}

.parent {

overflow: hidden;

}

.pagination {

list-style: none;

}

.pagination li {

float: left;

width: 35px;

height: 35px;

text-align: center;

line-height: 35px;

border: 1px solid #FF9900;

margin-right: 10px;

}

.pagination li:last-child {

margin-right: 0;

}

.pagination li a {

display: block;

text-decoration: none;

}

幅が固定されているなら、リストの親要素である parent クラスに幅を指定して margin:0 auto; を追加するだけです。

今回のページネーションもどきは、幅が 35px の数字ブロック×６、1px 枠線が左右２本×６、数字ブロック間の隙間が 10px ×５となっているので、

35×6＋1×2×6＋10×5＝272

となるのでスタイルシートは次のようになります。

.test {
    width: 500px;
    height: 150px;
    border: 1px solid #AAA;
}

.parent {
    overflow: hidden;
    width: 272px;      /* 追加 */
    margin: 0 auto;    /* 追加 */
}

.pagination {
    list-style: none;
}

.pagination li {
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #FF9900;
    margin-right: 10px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    text-decoration: none;
}

.test {

width: 500px;

height: 150px;

border: 1px solid #AAA;

}

.parent {

overflow: hidden;

width: 272px; /* 追加 */

margin: 0 auto; /* 追加 */

}

.pagination {

list-style: none;

}

.pagination li {

float: left;

width: 35px;

height: 35px;

text-align: center;

line-height: 35px;

border: 1px solid #FF9900;

margin-right: 10px;

}

.pagination li:last-child {

margin-right: 0;

}

.pagination li a {

display: block;

text-decoration: none;

}

これで中央寄りにすることができます。

20161106_2_2

幅が未定の場合

ブログの記事数が少ないとページネーションは幅が未定であるため、上記のような方法を使うことができません。次のソースコードを追加します。

.pagination {
    float: left;
    position: relative;
    left: 50%;
}

.pagination li {
    position: relative;
    left: -50%;
}

.pagination {

float: left;

position: relative;

left: 50%;

}

.pagination li {

position: relative;

left: -50%;

}

すべて記述すると次のようになります。

.test {
    width: 500px;
    height: 150px;
    border: 1px solid #AAA;
}

.parent {
    overflow: hidden;
}

.pagination {
    list-style: none;
    float: left;
    position: relative;
    left: 50%;
}

.pagination li {
    float: left;
    position: relative;
    left: -50%;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #FF9900;
    margin-right: 10px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    text-decoration: none;
}

.test {

width: 500px;

height: 150px;

border: 1px solid #AAA;

}

.parent {

overflow: hidden;

}

.pagination {

list-style: none;

float: left;

position: relative;

left: 50%;

}

.pagination li {

float: left;

position: relative;

left: -50%;

width: 35px;

height: 35px;

text-align: center;

line-height: 35px;

border: 1px solid #FF9900;

margin-right: 10px;

}

.pagination li:last-child {

margin-right: 0;

}

.pagination li a {

display: block;

text-decoration: none;

}

li で横並べにするための float と ul の float が重複しているように感じるかもしれませんが、ul の float を試しに削除してみると、中央に配置されなくなります。原因はよくわからない。

理屈はともかく、この方法にすれば幅が決まっていない float で横並べにしたものが中央に配置されるようになります。

inline-blockのほうがわかりやすい

こちらのほうがシンプルでわかりやすいです。先ほどのページネーションもどきを inline-block で実現すると、スタイルシートは次のようになります。説明の流れで parent クラスを残していますが、使わないので削除しても大丈夫です。ul や li を div タグで囲まなくても済むということですね。

.test {
    width: 500px;
    height: 150px;
    border: 1px solid #AAA;
}

.parent {

}

.pagination {
    letter-spacing: -1em;
    text-align: center;    /* 中央揃えはここを追加するだけ */
}

.pagination li {
    display: inline-block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #FF9900;
    letter-spacing: 0em;
    margin-right: 10px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    text-decoration: none;
}

.test {

width: 500px;

height: 150px;

border: 1px solid #AAA;

}

.parent {

}

.pagination {

letter-spacing: -1em;

text-align: center; /* 中央揃えはここを追加するだけ */

}

.pagination li {

display: inline-block;

width: 35px;

height: 35px;

text-align: center;

line-height: 35px;

border: 1px solid #FF9900;

letter-spacing: 0em;

margin-right: 10px;

}

.pagination li:last-child {

margin-right: 0;

}

.pagination li a {

display: block;

text-decoration: none;

}

inline-block によって横並べにしたものを中央寄りにするには、ul タグに text-align を設定するだけです。ここでは pagination クラスのことですね。

ブロック要素内のテキストを text-align によって中央寄りにするイメージです。インラインブロックという名前からも、inline-block 指定された li はインライン要素のように取り扱えるというわけです。この方法の良いところは、幅が決まっていてもいなくても、同じ方法で中央に配置可能なことです。inline-block を使ったページネーションについてはこちらで記事にしているので、あわせてお願いします。

inline-blockで要素を横並びにする | Naokix.net

float と inline-block のどちらを使っても結果は同じですが、私は感覚として覚えやすい inline-block のほうが好きです。