Question

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

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

我已尝试按照之前的问题使用table-cell，但即使使用table-cell / vertical align，文本也会在div的顶部对齐。

Answer 1

除非您尝试支持真正的旧浏览器，否则您实际上可以使用flex。这是一个JSFiddle 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%;
}

只要您使用justify-content和align-items属性，就可以轻松地在容器内纵向和横向居中，而无需进行任何操作。

注意：如果您只想要垂直对齐，可以删除justify-content属性。

Answer 2

table-cell垂直对齐技巧需要两个元素才能工作，父级需要display: table，孩子要以display: table-cell和vertical-align: middle为中心。我已经通过添加<span>来保存文字，以下方式更新了您的JSFiddle。

＆＃13;

.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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 3

display table，table-row，table-cell是一种方法，但你可以使用不同的简短方法，如

#include<stdio.h>
int main()
{
    int i, j;
    char caract[13][20] = { "Bandeira",
                         "Superior",
                         "Pele dura",
                         "Armadura",
                         "Faca",
                         "Espada",
                         "Agressao",
                         "Ecologico",
                         "HeatSeeker",
                         "BuildSeeker",
                         "walker",
                         "Remedio",
                         "SecondChance"};
        for(i=0; i<13; i++)
        {
            for(j=0; j<3; j++)
                printf("\n%c\n", caract[i][j]);
        }
    return 0;
}

显示flex是一种方法，但使用此方法只能获取行

中的元素

CSS中的垂直对齐不起作用

3 个答案:

HTML

CSS