集中<a> as display block, vertically and horizontally</a>的所有文字

Question

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <style>
        #metro {
            width: 100%
            height: auto;
            font-size: 16px;
        }
        #metro .metro_half_row {
            width: 50%;
            float: left;
            height: 100px;
            color: white;
            background-color: grey;
        }
        #metro .metro_half_row a {
            display: block;
            height: inherit;
            text-align: center;
        }
    </style>

    <div id="metro">
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
        <div class="metro_half_row">
            <a href="#">
                    <h1>TEXT1</h1>
                    <h2>TEXT</h2>
            </a>
        </div>
    </div>

我使用#metro, .metro_half_row

将每个部分包装为display: block

现在<a>中的文字水平居中，但不是垂直居中。我需要将链接中包含的文本居中，每个<a>水平和垂直覆盖整个子div块。

Answer 1

尝试：

#metro .metro_half_row a {
    display: table-cell;
    width: inherit;
    vertical-align: middle;
    height: inherit;
    text-align: center;
} 

#metro .metro_half_row {
    display: table; 
}

查看http://jsfiddle.net/alemarch/589pqd62/

Answer 2

display: table和display: table-cell是您的朋友。

#metro {
  width: 100%;
  height: auto;
  font-size: 16px;
}

#metro .table-block {
 width: 100%; 
 display: table;
}

#metro .table-cell {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
}
#metro .metro_half_row {
  width: 100%;
  height: 100px;
  color: white;
  background-color: grey;
  display: table;
}
#metro .metro_half_row a {
  width: 100%;
  display: table-cell;
  height: inherit;
  text-align: center;
  vertical-align: middle;
}

<link href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" rel="stylesheet" />

<div id="metro">

  <div class="table-block">

    <div class="table-cell">
      <div class="metro_half_row">
        <a href="#">
          <h1>TEXT1</h1>
          <h2>TEXT</h2>
        </a>
      </div>
    </div>
    <div class="table-cell">
      <div class="metro_half_row">
        <a href="#">
          <h1>TEXT1</h1>
          <h2>TEXT</h2>
        </a>
      </div>
    </div>

  </div>

  <div class="table-block">

    <div class="table-cell">
      <div class="metro_half_row">
        <a href="#">
          <h1>TEXT1</h1>
          <h2>TEXT</h2>
        </a>
      </div>
    </div>

    <div class="table-cell">
      <div class="metro_half_row">
        <a href="#">
          <h1>TEXT1</h1>
          <h2>TEXT</h2>
        </a>
      </div>
    </div>

  </div>
</div>

Answer 3

如果我在您的情况下正确理解您的问题，CSS可能如下所示：

a{
  margin-top:25px;
 }

或

a{
 position: relative;
 top: 25%;
 }