How to horizontally align to “block” divs inside a div?


Tags: html,css,alignment

Problem :

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!



Solution :

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

no need to specify width


    CSS Howto..

    How can i make 3 independently scrollable columns

    How to inherit height in div?

    How does the Meebo bar work so well cross-browser?

    Showing divs in th on the same line

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to use the css height attribute for showing scroll bar in HTML table

    how to disable width: 100%; and box-sizing: border-box;

    How to insert a comma in the following code

    How to inherit css from grandparent tag? [duplicate]

    Heroku Not Showing SCSS Background Images

    Jquery button click to show div right to left with slide animation

    How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

    How to make css width work in firefox

    Box-shadow is overlapping other elements, how can I fix it?

    Anyone know how to create CSS rectangle with one corner chopped off?

    How to make a very simple coloured 1-line text area?

    Only show wordpress featured image when shared on social media

    contenteditable does not show pseudoselector :before in safari

    how to avoid css jitters while applying css border with hover pseudo class

    How to fix image urls when processing css files with Gulp?

    How to make the html table on same line? Wordpress, woocommerce

    What shape is this, and how can i achieve it using css?

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    How to get the exact RGBa value set through CSS via Javascript?

    HTML/CSS: How to achieve the following center-left alignment?

    How to change tooltip style in jQuery vmap?

    How can I get these two widgets to align horizontally using CSS selectors?

    Rails - how to build a grid-like list of product page

    Jquery content slider, how to duplicate without redundant code

    How do i use a simple string variable with jquery?