CODEWITHSUNDEEP
csshtml
Zag Gol
Zag Gol

Reputation: 1076

CSS vertical-align

I'm learning now CSS.

As a practice, I am trying to create a simple html5 template with the header, section, footer, aside, nav tags - in there correct location. in every tag area, I put the tag name with a different background and font color. the problem is, that I can't vertical-align the tag text to the middle. I tried to create a inner element - span, and set it like this:

span {
     height:100px;
     line-height:100px;
     vertical-align:middle; 
}

or like this:

span {
    height:100%;
    line-height:100%;
    vertical-align:middle; 
}

but it only sets the text exactly in the vertical middle of a element, when the browser is in a specific size. every change, changes the location of the text.

this is the full code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="style.css" rel="stylesheet" />  
        <script>

        </script>

        <style>
            body,html{
            height:100%;
            width:100%;
            }

            header{
                text-align:center;
                color:blue;
                background:violet;
                height:15%;
            }

            aside{
                text-align:center;
                float:left;
                width:20%;
                height:100%;
                display:inline-block;
                color:red;
                background:lime;
            }

            section{
                text-align:center;
                float:left;
                width:60%;
                height:100%;
                display:inline-block;
                color:pink;
                background:tan;
            }

            nav{
                text-align:center;
                float:left;
                width:20%;
                height:100%;
                display:inline-block;
                color:cyan;
                background:orange;
            }

            footer{
                text-align:center;
                color:gold;
                height:15%;
                background:yellow;
            }

            span {
                  height:100%;
                  line-height:100%;
                  vertical-align:middle; 
            }

            #center-page{
                height:70%;
                font-size:150%;
            }
            </style>

        </head>
        <body>
            <header>
                <span>header</span>
            </header>

            <div id="center-page">
                <aside> 
                    <span>aside</span>
                </aside> 
                <section>
                    <span>section</span>
                </section>
                 <nav>
                    <span>nav</span>
                </nav>
            </div>
             <footer>
                    <span>footer</span>
            </footer>
        </body>
</html>

thanks!

Upvotes: 1

Views: 3036

Answers (2)

Russel Fish
Russel Fish

Reputation: 31

Here's an alternate solution, and is awesome to keep as a reference. Taken from: http://vanseodesign.com/css/vertical-centering/

CSS Table Method

"...vertical-align applies to table cells which leads us to this method. We’ll display our elements as table and table cell and then use the vertical-align property to center the content."

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

Oriol
Oriol

Reputation: 288620

You can try flexbox:

header, aside, section, nav, footer {
  display: flex;           /* Magic begins                    */
  justify-content: center; /* Center horizontally             */
  align-items: center;     /* Center vertically               */
  min-width: 0;            /* Ignore the width of the content */
}


body, html {
  height: 100%;
  margin: 0;
}
header, aside, section, nav, footer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
header {
  color: blue;
  background: violet;
  height: 15%;
}
#center-page {
  display: flex;
}
aside {
  flex: 2;
  color: red;
  background: lime;
}
section {
  flex: 6;
  color: pink;
  background: tan;
}
nav {
  flex: 2;
  color: cyan;
  background: orange;
}
footer {
  color: gold;
  height: 15%;
  background: yellow;
}
#center-page {
  height: 70%;
  font-size: 150%;
}
<header>header</header>
<div id="center-page">
  <aside>aside</aside>
  <section>section</section>
  <nav>nav</nav>
</div>
<footer>footer</footer>

Upvotes: 6

Related Questions