DIV izquierdo/centro/derecho con alineación vertical

Trying to set up a outer DIV that is 114px high and 100% wide (page width). Inside that I want three DIVs left, center and right. The height of these inner 3 divs vary. I'd like all three inner DIVs to be centered top to bottom (vertically aligned).

I have gotten close floating left and right or left:0 and right:0 but stuck on the vertically centered part. Left and right DIVs contain images center text only. Having a hard time getting images to show on jsfiddle so I can't provide much of an example, sorry.

I have found examples with top and bottom alignment but no luck centered.

¡Gracias!

EDIT:

TyBlitz, you pointed me in the right direction. Thanks! However, on your container div height - inner div height you then need to divide by 2. For your example:

114-50=64 then divide by 2 = 32 for top.

Also needed to play around with text-align (left/center/right) Not thrilled making all inner DIVs 33% but it works. Seems like I should be able to have them scalable width and still position them correctly. Here is my fiddle with example images imbedded: mi violín

preguntado el 09 de septiembre de 13 a las 23:09

If you like tyblitz' answer then accept as n answer or at least upvote. -

3 Respuestas

¿Al igual que?

Simply float the 3 divs, give each of them a height, position them relatively (important!) and give them a top: container.height - innerdiv.height; E.g. container.height of 114 & innerdiv.height of 50 => 114-50 = 64=> top: 64px;

EDIT: Well if you don't want to make your divs all 33% , with some simple math you can approximately position your divs with the float y margin propiedades.

Como en este violín of yours I updated.

The math behind it is:

  1. Container.length - combined innerdiv.length = unoccupied.length
  2. margin-left: unoccupied.length / x (eg 50px / 5 = margin of 20% = 10px)

Respondido el 11 de Septiembre de 13 a las 00:09

Tyblitz, that is close but I'd like the center DIV to always be centered and the Left/Right always far left and far right no matter the width. If I take off the 33% width for each (Right/Center/Left) DIV they end up all left aligned one after the other - RichP

@RichP Edited my answer, does it fit you better? - webketje

I think this can solve your problem, although you'll have to create 3 wrapper divs.

HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

CO

.outer,
.leftDiv,
.rightDiv,
.centerDiv{
    height: 114px;
}

.leftDiv{
    float: left;
}
.rightDiv{
    float: right;
}
.centerDiv{
    overflow: hidden;
}

.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
    vertical-align: middle;
    display: inline-block;
}

.leftInnerDiv{
    background-color: red;
}
.rightInnerDiv{
    background-color: green;
}
.centerInnerDiv{
    background-color: blue;
}

enlace jsfiddle: http://jsfiddle.net/pv6yJ/1/

Please note though:

  • The right div is declared before the middle div in the html.
  • My solution (css vertical align) doesn't work on IE7 or lower.

Respondido el 10 de Septiembre de 13 a las 17:09

I've created this example to show how to vertically align the container and use column count (css3) which will automatically layout the 3 divs into 3 equal columns.

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

and for non supporting browsers (IE) you can just set the width to 33% and float left.

http://codepen.io/tom-maton/pen/oqsEJ

Espero que esto ayude

Respondido el 11 de Septiembre de 13 a las 12:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.