Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center multiple inline blocks with CSS and align the last row to the left

Tags:

html

css

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).

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  |               |
|       |_____|               |

You can see some sample HTML at http://jsfiddle.net/5JSAG/.

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  |               |
|       |_____|               |
like image 888
bogdansrc Avatar asked May 04 '13 13:05

bogdansrc


People also ask

How do you center an inline block in CSS?

Inline block divs can be centered by applying text-align:center to their parent.

How do you align inline block elements?

To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.

How do you center two block elements?

Block level elements We can center a block-level element by giving it margin-left and margin-right of auto (which has a known specified width):

How do you center Items block in CSS?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.


2 Answers

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;
}
like image 91
bogdansrc Avatar answered Sep 29 '22 20:09

bogdansrc


Floating them seems the best option here. You could put left/right margins on the container if you need space on the left and right, or you could give the container a width and auto left and right margins.

Looks like it might be worth margin this up as an unordered list, too.

Here's an example:

http://codepen.io/anon/pen/Ehgdp

like image 43
ralph.m Avatar answered Sep 29 '22 20:09

ralph.m