垂直文本对齐多行答案

【问题标题】：Vertical text align for multiple lines垂直文本对齐多行
【发布时间】：2014-05-01 20:55:33
【问题描述】：

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

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

【问题讨论】：

我首先敦促您重新考虑您的 HTML 布局。您缺少结尾
，并且嵌套了多行，这对我来说似乎很疯狂。你不应该这样做。

像DEMO 这样的东西？还有flush with the other lines是什么意思

标签： html css vertical-alignment text-alignment

【解决方案1】：

小提琴示例：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>

【讨论】：