How to center element inside of a div

Question

I want to center the content of .SideBarFirst div but don't know how to achieve this.

Can someone help me out with an solution which is not based on adding padding or left/right values to the element?

body {
    width: 960px;
    margin: 0 auto;
} 

.content {
    width:500px; 
    float: left;
}

.SideBarFirst {
    width:460px; 
    float: right;
}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

<body>
    <div class="content">test</div>
    <div class="SideBarFirst">
        <div>not working for center</div>
    </div>
</body>

My current code: http://jsfiddle.net/21sxvg4L/

Here are two simple methods to center an element inside a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 19 '15 at 21:09
Yup display table and flex is not safe soloution for responsive website! Example: show a big image in display table this div scale and over 100%. — masoud soroush, Aug 23 '15 at 09:59
my question is why some time margin 0 auto inside off margin 0 auto working but sometimes not working ??? — masoud soroush, Aug 23 '15 at 10:01

score 1 · Answer 1 · answered Jul 28 '13 at 12:10

1

just remove this:

body {
    width: 960px;
    margin: 0 auto;
}

use this:

HTML

<div class="content">test</div>
<div class="SideBarFirst">
    <div>not working for center</div>
</div>

CSS:

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

See This Fiddle

answered Jul 28 '13 at 12:10

Mohammad Masoudian

3,483
7
27
45

i have seen this you just removed css from body – Hushme Jul 28 '13 at 12:14
i already have seen this and i know what you changed when you wrote the code what was wrong with body width and margin auto – Hushme Jul 28 '13 at 12:15
actually i don't know. its a strange behavior :| – Mohammad Masoudian Jul 28 '13 at 12:17
ha ha he did nothing wrong in he jsut give width to body thats all and according to css rule its not good practice see my comment in question i already mentioned it there – Hushme Jul 28 '13 at 12:19
why width in body make problem? – Mohammad Masoudian Jul 28 '13 at 12:21

score 0 · Answer 2 · edited May 23 '17 at 12:22

YOu can use %

.SideBarFirst div {
    width: 40px;
    margin: 0 50%; 
}

Or you can be more brute and try this:

.SideBarFirst div {
    width: 40px;
    margin-left: 210px; 
}

Elastic layout will not work right with the this second code

Or this:

<div class="content">test</div>
<div class="SideBarFirst">
    <div align="center">not working for center</div>
</div>

Look this too: How to horizontally center a <div> in another <div>?

score 0 · Answer 3 · answered Jul 28 '13 at 12:26

Your problem is that you are floating the element to the left so that it will always appear on the left. If you wan to center it change your css to this:

.content {width:500px; float : left;}

.SideBarFirst {width:460px; float : right;}

.SideBarFirst div {
    width: 40px;
    margin: 0 auto; 
}

Also remove this:

body {
    width: 960px;
    margin: 0 auto;
}

masoud soroush · Accepted Answer · 2023-01-30T01:58:43.143

0

this days problem solved with the display flex

.SideBarFirst {
    width:460px; 
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

by the way we can't apply margin or width to the body

edited Jan 30 '23 at 01:58

answered Jun 25 '17 at 08:16

masoud soroush

677
11
21

How to center element inside of a div

4 Answers4