垂直文本对齐多行

Posted 2023-03-05

【中文标题】垂直文本对齐多行

【英文标题】：Vertical text align for multiple lines

【发布时间】：2014-05-01 20:55:33

【问题描述】：

1) 我想知道如何将这些文本全部放在一个块中，在页面中心对齐（垂直和水平）。 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;
    

【问题讨论】：

我首先敦促您重新考虑您的 HTML 布局。您缺少结尾

，并且嵌套了多行，这对我来说似乎很疯狂。你不应该这样做。

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

【参考方案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>