Search code examples
cssmargincenter

How to center element inside of a div

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/

Solution

  • 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