CODEWITHSUNDEEP
htmlcss
Michael Samuel
Michael Samuel

Reputation: 3920

center 2 elements with display inline-block

I have this simple CSS code:

div {
    width:100px;
    height:100px;
    border:1px solid #000000;
    display:inline-block;
    margin:0 auto;
    text-align:center;
}

And this HTML code:

<div>
</div>
<div>
</div>

I'm having hard time trying to center those 2 DIVs horizontally across screen with inline-block. Neither margin auto nor text-align center is working.

Upvotes: 0

Views: 79

Answers (1)

George
George

Reputation: 36794

text-align will align the inline contents of the element. So you will need to apply this property to the parent of your <div>s.

text-align - MDN:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

In the case above, I guess it would be <body>:

body{
    text-align:center;
}

JSFiddle

Upvotes: 1

Related Questions