使第二个子元素居中于父div宽度float子元素内

Question

I have this html structure.

<div id="parent">
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
</div>

and a css for those elements.

#parent{
    padding: 0px 8px;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
}
.child{
    width: 300px;
    display: block;
}
.child:first-child{
    float: left;
}
.child:last-child{
    float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}

as you can see from above codes, the objective is to make those child elements align correctly in a neat and clean way so the first child element is floated left, the last child element is floated right and the second child element should be exactly on between those left and right child elements so what im trying to achieve is a three box that align on a equal patern inside a parent div. So far I tried margin: 0 auto; on the middle child element but unfortunately does not work so currently Im looking for a precise solution to achieve my desired output.

Answer 1

Just float it:

#parent{
    padding: 0px 8px;
    overflow: auto;
    max-height: 100%;
    float:left;
    width:900px;
}
.child{
    width: 300px;
    display: block;
    float:right;
}

here's a fiddle

Answer 2

Float your second div to the left and apply a margin left if needed. If you are trying to create a responsive template, simply use % instead of pixels. I hope that makes sense.

.child:first-child, .child:nth-child(2) {
    float:left;
}

.child:nth-child(2) {
    /* what is the style here to make it center? */
    margin-left: what ever pixels or %;
}

.child:last-child {
    float:right;
}

JSFIDDLE (Responsive):

http://jsfiddle.net/83Gg2/

Answer 3

You don't need to float the elements one to other, what you need, is to use display: inline-block property on them, is an hacky but an cleaner approach:

#parent{                                                                        
     width: 100%; 
     height: 100%;                                                  
     max-width: 100%;
     max-height: 100%;                                          
     overflow: hidden;                                                           
}                                                                                
.child{                                                                         
     width: 33%;  // Since there are 3 childs.                                                               
     display: inline-block;                                                       
}     

The trick and hack here is that you need to comment the space between the child elements in your HTML code, since the property display:inline-block only align elements that have not space between them, so your html code should look like this:

<div id="parent">                                                               
     <div class="child">                                                         
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                                               
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div>                                                                      
 </div>                                                                          
 ~     

This is the link to the JsFiddle Check it out

~
~

Answer 4

Ok, since you tag jquery also, here is the JQ way.

If you dont want to set fix width to #parent and you want a fix width to .child , use this. Also works in cross browsers and old browsers.

DEMO http://jsfiddle.net/yeyene/VW9mw/

$(document).ready(function(){
    moveCenter();
    $(window).resize(function() {
        moveCenter();
    });
});
function moveCenter(){
    var mar = ($('#parent').width()-$('.child').width()*3)/2;    
    $('.child').eq(1).css({
        'margin-left': mar+'px',
        'margin-right':mar+'px'
    });
}

Answer 5

Flexbox makes this trivial:

#parent {
  display: flex;
}
.child {
  flex: 1;
}

Add prefixes and older syntax as necessary, conforming to http://caniuse.com/#search=flexbox

I whipped up an example for you: http://codepen.io/anon/pen/tribL