Centering all text of <a> as display block, vertically and horizontally

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>

I've wrapper as #metro, .metro_half_row as each section, using a display: block

Right now the text in <a> is centered horizontally, but not vertically. I need to center the text contained in the links, and each <a> covering the entire sub div block both horizontally and vertically.

Answer 1

Try:

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

#metro .metro_half_row {
    display: table; 
}

view http://jsfiddle.net/alemarch/589pqd62/

Answer 2

display: table and display: table-cell are your friends.

 #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

If i understand your problem correctly in your case, the CSS may look like this:

a{
  margin-top:25px;
 }

or

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