w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Align one child element to the left when parent aligns all child elements to the center

Working example:

http://jsfiddle.net/852ewccc/2/

I used a float: left on the left-hand div, and a margin: 0 auto; to center the other div.

HTML:

<div id="parent">
    <div id="left">

    </div>
    <div id="center">
    </div>
</div>

CSS:

#parent{
    width: 500px;
    height: 100px;
    background: blue;
}
#center{
    margin: 0 auto;
    width: 200px;
    height: 50px;
    background: green;
}
#left{
    width: 100px;
    background: orange;
    height: 30px;
}




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.