1

I have a CSS question. I am about to use a table instead of CSS so I think it is time to ask here ! I have made fiddle to simplify everything : http://jsfiddle.net/Rue74/1/

<div id="dashboard_layer">
</div>

I have a layer with 3 blocks : - 1 logo on the left - 1 logo on the right - Every left space in the middle

I want my two logos to use ALL vertical space. (I don't want any content from the center div to be able to be under the logos). And I want the two logos to be vertically centered. In the middle, I have a list of filters (which are basically buttons). The first two are "double height" and the other ones "simple height". I want them to be all on the same line, but if there is no space, the second line should start under the 3rd element (because the two first are double height !) and the third line should start under the first element (as the double height doesn't affect this line anymore). And last difficulty... I'd like all these buttons to be vertically aligned !

I really have no more idea how to do this, except by using a table... Which doesn't seem to be the best solution for this... If you have any other idea, please let me know !

Thanks !

user3017110
  • 155
  • 12
  • http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css?rq=1 – Piccolo Jul 02 '14 at 16:05
  • Thanks but this doesn't really help me. I have been looking at many links about Vertical alignment, but this is not as easy when there are floating div... – user3017110 Jul 02 '14 at 16:11
  • You're kind of all over the place with this... what exactly do you want? The white div to stretch across the entire screen? The white div to be vertically aligned in the red div? – BuddhistBeast Jul 02 '14 at 18:05

3 Answers3

2

Have a look at Flexbox, you can vertically align it all easily

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

RachJenn
  • 109
  • 1
  • 11
2

You can use position absolute (with left / right depending on what floats you need)

 .selector{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
 }

http://codepen.io/sebastianekstrom/pen/kzEhe

Rob Erskine
  • 909
  • 2
  • 10
  • 25
2

Does your div have a set height? If so, you can use that to your advantage:

http://jsfiddle.net/stacigh/L6S3j/

.mydiv {
  background-image: url('http://placekitten.com/g/400/300');
  width: 400px;
  height: 300px;
  margin: 0px auto;
  margin-top: calc(50vh - 150px);
}

Some caveats: calc() isn't supported in sub IE9 and viewport units aren't supported in the calc() function in webkit before version 34: http://caniuse.com/#search=vh

stacigh
  • 676
  • 1
  • 7
  • 13