vertical align: middle; not working?

Question

I'm trying to get vertical align working in all boxes, so all titles are vertical aligned in the middle. But for some reason the only one that works is the Right box?

https://jsfiddle.net/vhqg3v81/

#div-layout { 
  display: table; 
  width: 100%;
  height:100%;
} 

.div-layout-row { 
  display: table-row;
} 

.div-layout-cell { 
  display: table-cell; 
  width: 25%;
  height:100%;
} 

.right-spacer {
    margin-right:5px;
}
.bottom-spacer {
    margin-bottom:5px;
}

.box {
    border: 1px solid black;
    background-color: yellow;
    text-align: center;  
    vertical-align: middle;
    padding: 5px;
    height: 100%;
    min-height:50px;
    min-width:50px;
}

<div id="div-layout"> 
  <div class="div-layout-row"> 
    <div class="div-layout-row"> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Left</div></div>
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Middle</div></div> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Right</div></div> 
    </div> 

    <div class="div-layout-row"> 
       <div class="div-layout-cell"><div class="box right-spacer">Botom Left</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Middle</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Right</div></div> 
    </div> 

    <div  class="div-layout-cell box">Right</div>

  </div> 
</div>

I doubt you fully grasped the concept of not using tables for layout. You're adding a table row inside another table row. It's a wonder the browsers do anything at all. — , Jan 18 '16 at 12:49
This works `div-layout-cell box` your other cells does not have `box` class which has the vertical align in it — Huangism, Jan 18 '16 at 14:45
Small box is vertical-align: middle; But the content in Samll box is on the top of small box. — tiny sunlight, Jan 18 '16 at 15:12
Possible duplicate of [CSS vertical-align: middle not working](http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working) — Moradnejad, Dec 13 '16 at 10:40

RoToRa · Answer 1 · 2016-01-18T16:00:18.267

vertical-align only applies to table cells (and inline elements, which isn't relevant here).

Your biggest problem, is that your HTML is far too complicated. You have a table row (div-layout-row) inside another table row (another div-layout-row), which doesn't make sense. Neither does having a table cell (box) inside another (div-layout-cell).

Generally your HTML is what is generally called "div soup" and the class names are badly chosen. They shouldn't represent the layout/design/look of the elements, but what they contain. Instead of building a theoretical web page with place holders, try building the layout based on the contents, such a "articles", "headlines", "paragraphs", "lists", "images", "navigation", "menus", "links", etc. especially using elements other that div: <section>, <article>, <h1>, <h2>, <ul>.

Also get away from the "layout as table mindset". There are other ways to layout elements (floats, flex grid, etc.)

EDIT: Here some sample code:

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
border: 1px solid red;
}

.gallery ul {
  padding: 0;
  margin: 0;
  list-style: none;

  display: flex;
  width: 75%;
  flex-wrap: wrap;
}

.gallery nav {
  width: 25%;
}

.gallery li {
  height: 50px;
  margin-right: 5px;
  width: calc(33.33% - 5px - 2px);
}

.gallery li, .gallery nav {
  display: flex;
  margin-bottom: 5px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
}

<section class="gallery">
  <ul>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
    <li><div>Example</div></li>
  </ul>
  <nav>
    <div>Example</div>
  </nav>
</section>

If you think you can do better than provide some examples of how to rewrite it! Your comments really do not help at all! — Merlin, Jan 18 '16 at 14:38
I wanted to write some sample code, but I didn't have the time. If you answer some questions, I could probably build something: What kind of content will your layout contain? Do they really need to to be centered, or can they just look like they are? — RoToRa, Jan 18 '16 at 14:58
Ok, did it without the questions. First time I used flexbox. Have fun :D — RoToRa, Jan 18 '16 at 15:41
Nice coding but unfortunately you have included border spacing around all cells which I never had. Yes I want spacing between the cells but not on the left or right of the screen as I want these cells flush with the other content on the screen. — Merlin, Jan 18 '16 at 15:57

score 0 · Answer 2 · answered Jan 18 '16 at 12:46

0

The element with vertical-align needs to be table-cell or in some circumstances inline-block.

answered Jan 18 '16 at 12:46

lucian.nicolaescu

647
3
9

score 0 · Answer 3 · answered Jan 18 '16 at 14:52

0

For aligning an element vertically in the middle of another element, you can add margin-top: auto; margin-bottom: auto; to the element.

answered Jan 18 '16 at 14:52

Bogie

153
9

score 0 · Answer 4 · answered Jan 18 '16 at 15:05

Add line-height:50px in .box.

#div-layout { 
  display: table; 
  width: 100%;
  height:100%;
} 

.div-layout-row { 
  display: table-row;
} 

.div-layout-cell { 
  display: table-cell; 
  width: 25%;
  height:100%;
} 

.right-spacer {
    margin-right:5px;
}
.bottom-spacer {
    margin-bottom:5px;
}

.box {
    border: 1px solid black;
    background-color: yellow;
    text-align: center;  
    vertical-align: middle;
    padding: 5px;
    height: 100%;
    min-height:50px;
    min-width:50px;
    line-height:50px;
}

<div id="div-layout"> 
  <div class="div-layout-row"> 
    <div class="div-layout-row"> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Left</div></div>
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Middle</div></div> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Right</div></div> 
    </div> 

    <div class="div-layout-row"> 
       <div class="div-layout-cell"><div class="box right-spacer">Botom Left</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Middle</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Right</div></div> 
    </div> 

    <div  class="div-layout-cell box">Right</div>

  </div> 
</div>

vertical align: middle; not working?

4 Answers4