Centre a 4 Horizontally DIV Block Using CSS

Question

I have four div blocks and I want to Centre the Horizontally, they keep stacking under each other.. any ideas how I can do this.

<div class="container">
   <div style="width:78%; margin:0 auto;">
    <div class="block">1. name of the company</div>
    <div class="block">2. name of the company</div>
    <div class="block">3. name of the company</div>
    <div class="block">4. name of the company</div>
</div>

err it does this? - http://jsfiddle.net/KCsS7/ – Alex May 30 '14 at 09:47 — Alex, May 30 '14 at 09:47
i am not getting ! what you want. – Ashok Damani May 30 '14 at 09:47 — Ashok Damani, May 30 '14 at 09:47
What are the attributes for `.block` and `.container` ? – Batu.Khan May 30 '14 at 09:48 — Batu.Khan, May 30 '14 at 09:48

score 0 · Answer 1 · answered May 30 '14 at 09:55

From what I understand is that you want the blocks next to each other.

Is this what you are looking for? Demo.

HTML

<div class="container">
    <div class="block-wrapper">
        <div class="block">1. name of the company</div>
        <div class="block">2. name of the company</div>
        <div class="block">3. name of the company</div>
        <div class="block">4. name of the company</div>
    </div>
</div>

CSS

.block-wrapper {
    width: 78%;
    text-align: center;
}
.block {
    display: inline-block;
}

score 0 · Answer 2 · answered May 30 '14 at 09:58

You can try using inline-block.

http://jsfiddle.net/8Qk5K/

display: inline-block;

This type of display value makes each block take up as much horizontal space as it needs (or it is given to) . Works best with percentage values if you want it responsive.

Also, I recommend using http://jsfiddle.net for demos. It is much easier for everybody to understand!

Good luck!

Centre a 4 Horizontally DIV Block Using CSS

2 Answers2