对齐图块中的文本/图片

Question

在左侧，您可以看到我当前的状态，在右侧，我使用了图像编辑程序来显示我希望瓷砖的外观。我尝试了一下，但每次当我尝试添加例如“xxx”文本时，整个磁贴都已向上移动。当有人能为我解决时，我将不胜感激。

.main {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #AAAAAA;
}
.main .inner {
  padding: 5px;
  font-size: 0px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.main .inner:hover {
  opacity: 0.8;
  background-color: #2e8bcc;
}
.tile h2 {
  font-size: 20px;
  color: #FFF;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  line-height: 1.1;
  text-align: center;
}
.tile {
  margin: 0px;
  padding: 0px;
  height: 190px;
  width: 190px;
  border: 5px solid #AAAAAA;
  opacity: 8;
  background-color: #2980b9;
  display: inline-block;
}
.body {
  background-color: #AAAAAA;
}

<div class="main">
  <div class="inner">
    <div class="tile">
      <h2>Name 1</h2>
    </div>
    <div class="tile">
      <h2>Name 2</h2>
    </div>
    <div class="tile">
      <h2>Name 3</h2>
    </div>
    <div class="tile">
      <h2>Name 4</h2>
    </div>
    <div class="tile">
      <h2>Name 5</h2>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
    </div>
    <div class="tile">
      <h2>Name 7</h2>
    </div>
  </div>
</div>

Answer 1

我发现您的代码没有任何问题。我只添加了

.tile {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.main {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #AAAAAA;
}
.main .inner {
  padding: 5px;
  font-size: 0px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.main .inner:hover {
  opacity: 0.8;
  background-color: #2e8bcc;
}
.tile h2 {
  font-size: 20px;
  color: #FFF;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  line-height: 1.1;
  text-align: center;
}
.tile {
  margin: 0px;
  padding: 0px;
  height: 190px;
  width: 190px;
  border: 5px solid #AAAAAA;
  opacity: 8;
  background-color: #2980b9;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  text-align: center;
}
.body {
  background-color: #AAAAAA;
}

<div class="main">
  <div class="inner">
    <div class="tile">
      <h2>Name 1</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 2</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 3</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 4</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 5</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
    <div class="tile">
      <h2>Name 7</h2>
      <img src="http://placehold.it/100x100">
      <div>xxxxx</div>
    </div>
  </div>
</div>

Answer 2

只需将float:left添加到.tile div，即可正常使用

.main {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #AAAAAA;
}
.main .inner {
  padding: 5px;
  font-size: 0px;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.main .inner:hover {
  opacity: 0.8;
  background-color: #2e8bcc;
}
.tile h2 {
  font-size: 20px;
  color: #FFF;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  line-height: 1.1;
  text-align: center;
}
.tile {
  float:left;
  margin: 0px;
  padding: 0px;
  height: 190px;
  width: 190px;
  border: 5px solid #AAAAAA;
  opacity: 8;
  background-color: #2980b9;
  display: inline-block;
}
.body {
  background-color: #AAAAAA;
}

<div class="main">
  <div class="inner">
    <div class="tile">
      <h2>Name 1</h2>
      <h4>xxxxxx</h> 
    </div>
    <div class="tile">
      <h2>Name 2</h2>
    </div>
    <div class="tile">
      <h2>Name 3</h2>
    </div>
    <div class="tile">
      <h2>Name 4</h2>
    </div>
    <div class="tile">
      <h2>Name 5</h2>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
    </div>
    <div class="tile">
      <h2>Name 6</h2>
    </div>
    <div class="tile">
      <h2>Name 7</h2>
    </div>
  </div>
</div>