使用CSS居中多个行内块，并将最后一行向左对齐 [英] Center multiple inline blocks with CSS and align the last row to the left

问题描述

我想水平居中几个内联块，但同时使它们与最后一行的左侧对齐（见下文）。

I want to horizontally center a few inline blocks, but at the same time have them align to the left on their last row (see below).

问题是我实现了这样的东西（ http://jsfiddle.net/5JSAG/ ）：

The problem is that I achieved something like this (http://jsfiddle.net/5JSAG/):

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|            _____            |
|           |     |           |
|           |  3  |           |
|           |_____|           |

虽然我想要这样的东西：

While I want something like this:

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  3  |               |
|       |_____|               |

您可以在http://jsfiddle.net/5JSAG/ 。

我已尝试使用 column-count 和 column-width ，但它不工作，因为我想要它，因为块的顺序改变：

I have tried using column-count and column-width but it doesn't work as I want it to, because the order of the blocks changes:

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  3  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  2  |               |
|       |_____|               |

推荐答案

找到一个相当简单的解决方案：

Found a quite simple solution to this problem: just add some filler divs at the end, which are of the same width with the blocks that are aligned.

http://jsfiddle.net/5JSAG/34/

HTML：

<div style="text-align:center">
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
</div

CSS：

.fill
{
    display:inline-block;
    width:100px;
    height:0px;
    line-height:0px;
    font-size:0px;
}

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
}

这篇关于使用CSS居中多个行内块，并将最后一行向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！