CODEWITHSUNDEEP
css
Dave Yang
Dave Yang

Reputation: 23

Vertical align in CSS not working

http://jsfiddle.net/wss92wmj/3/

font-size: 2em;
display:table-cell;
vertical-align: middle;
text-align:center;

I've tried using table-cell as per previous questions but even with table-cell/vertical align the text is aligned at the top of the div.

Upvotes: 1

Views: 698

Answers (3)

Mohit Yadav
Mohit Yadav

Reputation: 471

display table,table-row,table-cell is one method but you can use different short methods like 

    <div class="bl">
    <div class="element">
    //your content
    </div>
`</div>`

css
.bl{

    display:inline-block;
     align-items: center;
      justify-content: center;
      height: 400px;
      width: 100%;

}
.element{

    vertical-align:top/middle;


    width:40px;

}

display flex is a method but using this u only get elements in line

Upvotes: 0

Ava
Ava

Reputation: 2429

Unless you're trying to support really old browsers, you can actually use flex for this. Here's a JSFiddle Example and a code example:

HTML

<div class="wrapper">
  <div class="item">
     Centered
  </div>
</div>

CSS

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 100%;
}

.wrapper .item {
  max-width: 50%;
}

As long as you just use the justify-content and align-items attributes, you can center anything vertically and horizontally within a container super easily without doing a hack.

Note: If you only want vertical alignment, you can remove the justify-content attribute.

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18659

The table-cell vertical alignment trick requires two elements to work, a parent with display: table and a child to be centered with display: table-cell and vertical-align: middle. I've updated your JSFiddle below to work this way by adding a <span> to hold the text.

.tile div {
  float: left;
  width: 19%;
  border: 1px solid white;
  height: 20%;
  /* = width for a 1:1 aspect ratio */
  background: url('https://st.hzcdn.com/simgs/80b1405f0e9f562c_4-0323/tile.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 2em;
  text-align: center;
  
  display: table;
}
.tile div span {
  display: table-cell;
  vertical-align: middle;
}
.tile div:nth-child(1) {
  background: url('http://i3.cpcache.com/product/687068509/bomb_tile_coaster.jpg?width=225&height=225&Filters=%5B%7B%22name%22%3A%22background%22%2C%22value%22%3A%22F2F2F2%22%2C%22sequence%22%3A2%7D%5D');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: red;
}
.tile div:nth-child(2) {
  background: url('https://s-media-cache-ak0.pinimg.com/236x/d0/80/ea/d080ea425f4d73892ede13cc56a61171.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: green;
}
div.tile {
  width: 500px;
  height: 500px;
  display: table;
}
<!-- 1st row */ -->
<div class="tile">
  <div><span>-10</span></div>
  <div><span>+10</span></div>
  <div></div>
  <div></div>
  <div></div>
  <!-- 2nd row */ -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!-- 3rd row */ -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

Upvotes: 0

Related Questions