CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
user3017110
user3017110

Reputation: 175

Vertically center a floating div

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 !

Upvotes: 1

Views: 2075

Answers (3)

Rob Erskine
Rob Erskine

Reputation: 927

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

Upvotes: 2

stacigh
stacigh

Reputation: 686

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

Upvotes: 2

RachJenn
RachJenn

Reputation: 119

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

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

Upvotes: 2

Related Questions