1

I have a working code here: http://jsfiddle.net/V3Suq/29/

Question

How to make child align to left, for example like this screenshot: Screenshot

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

.parent {
    width: 100%;
    background: #f00;
    height: 210px;
   text-align: center;
}

.child {
    width: 150px;
    height: 100px;
    background: #000;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
Luxor
  • 45
  • 1
  • 9

1 Answers1

0

Set text-align: left; with parent class and update width from % to px like this width: 500px; and set padding-left to some px, so your updated parentclass is look like 

.parent {
    width: 500px;
    background: #f00;
    height: 210px;
    text-align: left;
    padding-left:50px;
}

FIDDLE is HERE

Usman
  • 3,200
  • 3
  • 28
  • 47
  • Hi @usman, thanks for your reply...but if I set text align to left the child div will not centered. – Luxor Jan 13 '15 at 07:35
  • Yes that's better, but how if we don't know the left padding of childs or the parent width? – Luxor Jan 13 '15 at 07:41
  • @Luxor means you want to say how much we add `px` left padding of child??and how much `px` the parent width should?? – Usman Jan 13 '15 at 07:45
  • I mean, we want the width of parent in %, so it will responsive. – Luxor Jan 13 '15 at 07:48
  • if you set it to `100%` means you allow your `div` to increase it width dynamically according to your div content. you may better understand with this link http://stackoverflow.com/questions/2385829/what-is-the-difference-between-px-em-and-ex – Usman Jan 13 '15 at 07:52
  • you can set the parent width in your FIDDLE to 100% and resize the window so the child position not in center anymore. :( – Luxor Jan 13 '15 at 08:01
  • Maybe we need to use jQuery to make it. Suggestion? – Luxor Jan 13 '15 at 08:03
  • you can use JQuery, but JQuery is not a solution, in the end from JQuery you will be changing CSS, and as far as the `width` of parent, you have to change it to some `px` other wise you have to alter your HTML to achieve what you need – Usman Jan 13 '15 at 10:05