/Html/Html - How to horizontally center an element

Html - How to horizontally center an element

You can apply this CSS to the inner <div>:

#inner {   width: 50%;   margin: 0 auto; } 
Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {   display: table;   margin: 0 auto; } 
It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {   display: table;   margin: 0 auto;   border: 1px solid black; }  #outer {   border: 1px solid red;   width:100% }
<div id="outer">   <div id="inner">Foo foo</div> </div>
EDIT
With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {     border: 1px solid black; }  #outer {   border: 1px solid red;   width:100%;   display: flex;   justify-content: center; }
<div id="outer">   <div id="inner">Foo foo</div> </div>
To align the div vertically centered, use the property align-items: center.

Source: thecodeteacher.com

Similar codes

58 votes107 views6 answers
Copy text to clipboard javascript
Html
0 vote136 views1 answer
Html document 4.0
Html
0 vote121 views3 answers
Type button on form
Html
109 votes102 views6 answers
Html how to add an image
Html
162 votes124 views6 answers
Html stylesheet link
Html
35 votes109 views6 answers
Adding a favicon in html
Html
1 vote107 views1 answer
Hidden label html
Html
0 vote129 views1 answer
Easy cubism landscape painting for beginners
Html
0 vote114 views2 answers
Center a video horizontally
Html
0 vote112 views1 answer
Html head /head body /body /html
Html