CODEWITHSUNDEEP
htmlcssalignment
Arco_Pelago
Arco_Pelago

Reputation: 325

How to horizontally align to "block" divs inside a div?

I have a div with another div inside it, in that div there are 3 <a>s. I want the inner div to horizontally align itself in the outer div.

How can i achieve this?

The outer div(Footer_Column) has to have display: inline_block and vertical-align: middle

So it looks like this:

-----------------------------
|                           |
|     i'm a link            |
|     i'm a long link       |                         
|     i'm short             |
|                           |
-----------------------------

HTML

<div class="Footer_Column">
    <div class="Footer_Column_Inner">
        <a href="url1.com">i'm a link</a>
        <a href="url2.com">i'm a long link</a>
        <a href="url3.com">i'm short</a>
    </div>
</div>

CSS

.Footer_Column {
        display: inline-block;
        vertical-align: middle;
        width: 32.7%;
    }
        .Footer_Column_Inner{
            display: inline-block;
        }
        .Footer_Column a {
            display: block;
            font: 13px Trebuchet MS;
            color: #464646;
            text-decoration: none;
        }

Thanks a lot!

Upvotes: 1

Views: 1026

Answers (2)

FabioG
FabioG

Reputation: 2986

.Footer_Column_Inner {
  margin: 0 auto;
  display: table;  
}

no need to specify width

Upvotes: 2

Alexander
Alexander

Reputation: 4219

Here's a fiddle: http://jsfiddle.net/piedoom/Jk32y/

I'll explain the CSS:

I added text align: center to the parent div to center the item in it, since the child div was an inline-block.

Then, to justify the text left in the child div, I added text-align: left;

I added some background coloration to show you how it works, but you would of course remove the color or set it to what you'd need.

Hope this helps.

Upvotes: 1

Related Questions