Align one child element to the left when parent aligns all child elements to the center

Question

I have a DIV set to align all child elements CENTER with text-align: center; but I would like to have one of the child elements aligned to the left, while keeping the rest centered.

How can I achieve this?

I tried to float left that element but it messed up my design since I am not using float at all.

.parent {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 8px;
}
.child (I want to align this one left) {
    display: inline-block;
    font-family: 'Source Sans Bold', Helvetica neue, verdana, arial;
    font-size: 16px;
    background-color: #5a8da3;
    padding: 4px;
}

Answer 1

There are multiple ways to go by this. But trying to visualize some of your future problems with this requirement when integrating with future code. The best way to do it is using different positions.

You want all div elements of a parent to be centered apart from one in particular. If you do not give a display property to the one div you want to the left it will NOT obey the parent's CSS rule: text-align:center;

I used the display property on all div elements that I want to be centered but I set the CSS rule: position:relative; to the parent. This will force all child divs with position:absolute; to be bound by the parent. Therefore I can set the properties top and left to the child div that I want to put on the left and these properties will be calculated based on the parent width and not the browser's window.

This is the best solution because a child div positioned absolute will not affect the structured template and therefore will not push centered div away from the center of the parent when you add more in future.

Here is your example:

http://jsfiddle.net/77wc17yo/

You can now move your left div using CSS properties: top, left, bottom, right.

.parent {
  background:#fefefe;
  padding:5px;
  border:1px solid black;
  text-align:center;
  position:relative;
}

.centerd {
   border:1px solid green;
  background:gold;
  padding:90px;
  display:inline-block;
}

.left {
  padding:40px;
  border:1px solid red;
  background:orange;
  width:40px;
  position:absolute;
  left:0;
  top:20px;

}