How to center multiple inline-block elements with CSS?


Tags: css

Problem :

I want to horizontally center two (or possibly more) inline-block elements inside a container block element. It should look like this:

--------------------------
|      _____   _____      |
|     |     | |     |     |
|     | foo | | bar |     |
|     |_____| |_____|     |
|_________________________|

However, with my broken code, it is currently looking like this:

--------------------------
| _____   ____            |
||     | |     |          |
|| foo | | bar |          |
||_____| |_____|          |
|_________________________|

HTML

<div>
 <a>foo</a>
 <a>bar</a>
</div>

CSS

div a {
 display: inline-block;
 padding: 1em;
 margin: 1em;
 border: 1px solid black;
}

The reason why the two anchors have to be inline-block and not just plain inline is because I don't want the anchor's padding and margin to overlap.



Solution :

Simply set text-align: center; on the div container.


    CSS Howto..

    How to move up an inner box and keep outer box in place with CSS?

    How to replicate this css media jquery using javascript to support IE

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    Visual studio 2013 crash when editing a css file. How do I troubleshoot?

    JavaScript / Jquery : How to find line-through words

    How to get my navbar to fluidly contain the largest element?

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to give a line break between buttons in css/html?

    How can I reposition a DIV with jQuery? [closed]

    How to do page load in jQuery?

    How to Implement different backgrounds on scroll [closed]

    How can I get width and height of big image after displaying it on html-page?

    How to create a texture paper background using CSS without image

    Symfony2: How to link CSS to HTML part?

    Show/hide rows based on class in HTML

    how to change css style for every second data (picture) from database?

    How to disable animation in a specific element in CSS

    Getting an class to show when item is clicked

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

    How to apply a css class to master page based on the url using jquery? [closed]

    How to create a DIV style switcher in JavaScript?

    in slick slideshow, just want center slide to be active

    How to make a centered, responsive CSS circle within a Boostrap div?

    How to align an element when it locates below some float elements?

    How to fix the css padding

    How do you get a Radio Button to change text color in html with jquery?

    How to make an Image overlay the site on click?

    How to add CSS class to asp.net from code behind [closed]