html - 多行垂直文本对齐

Question

1)我想知道如何将这些文本全部放在一个 block 中，在页面中居中对齐(垂直和水平)。 2)我还希望每一行文本与其他文本行齐平。有什么想法吗？

Demo

HTML

<div class="row">
    <div class="panel">
        <div class="large-12 columns" id="date"><span>5TH MAY 2014</span>
        </div>
        <div class="row">
            <div class="large-12 columns" id="title"><span>HIGHGATE MARKET & FAIR</span>
            </div>
            <div class="row">
                <div class="large-12 columns" id="desc"><span>ARTS, CRAFTS, COLLECTABLES AND FINE FOODS</span> 
                </div>
                <div class="row">
                    <div class="large-12 columns" id="address"><span>Lauderdale House Waterlow Park Highgate Hill Highgate N6 5HG</span>
                    </div>
                </div>
            </div>

CSS

 #date {
        font-size: 114.42px;
    }
    #title {
        font-size: 61.88px;
    }
    #desc {
        font-size: 33.27px;
    }
    #address {
        font-size: 21.68px;
    }
    .panel {
        background-color: #202020;
        border-style: none;
    }
    @font-face {
        font-family:'adamregular';
        src: url('adam-webfont.eot');
        src: url('adam-webfont.eot?#iefix') format('embedded-opentype'), url('adam-webfont.woff') format('woff'), url('adam-webfont.ttf') format('truetype'), url('adam-webfont.svg#adamregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    body {
        font-family:'adam';
        color: #B9B8B9;
        background-color: #202020;
        text-align: center;
        position: absolute;
        top: 0 bottom: 0;
        left: 0;
        right: 0;
    }

Answer 1

fiddle 示例:http://jsfiddle.net/T2T69/1/

---

使用您提供的标记，您可以从 body 中删除 absolute 位置并添加此样式

html, body { 
   height: 100%;  
   margin: 0; 
   padding: 0; 
}

body { 
   display: table; 
   width: 100%; 
} 

body > .row { 
   display: table-cell; 
   vertical-align: middle;
   text-align: center; 
}

屏幕截图示例(在 Firefox 27 上)

---

作为旁注，我建议使用更清晰的标记而不是嵌套的 div，例如

<section>
   <time datetime="2014-05-05">5TH MAY 2014</time>
   <h1>HIGHGATE MARKET & FAIR <span>ARTS, CRAFTS, ..., FOODS</span></h1>

   <p>Lauderdale House Waterlow Park Highgate Hill Highgate N6 5HG</p>
</section>