CODEWITHSUNDEEP
htmlcssvertical-alignmenttext-alignment
user3087394
user3087394

Reputation: 243

Vertical text align for multiple lines

1) I was wondering how I can have this text all in one block aligned centerally in the page (both vertically and horizontally). 2) I also want each line of text flush with the other lines of text. Any ideas?

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

Upvotes: 2

Views: 111

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

Example fiddle: http://jsfiddle.net/T2T69/1/

with the markup you provided you can remove the absolute position from body and add this style

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

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

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

Example screenshot (on firefox 27)

enter image description here

As a side note, I would suggest to use a cleaner markup instead of nested div, something like

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

Upvotes: 2

Related Questions