HTML Academy
The text-align property does more than just align text
Typography9/20
Back to the list of tasks
  • 1. The font-size property
  • 2. Relative font size
  • 3. The line-height property
  • 4. Relative line height
  • 5. The font-family property
  • 6. The font-weight property
  • 7. The text-align property, horizontal text alignment
  • 8. The text-align property does more than just align text
  • 9. The vertical-align property, vertical text alignment
  • 10. Use of the background in typography
  • 11. The color property, text color
  • 12. Using margins to format the text
  • 13. The white-space property, space management
  • 14. Assignment of styles to preformatted text
  • 15. The text-decoration property, underlining as well as other effects
  • 16. The font-style property, italics
  • 17. The text-transform property, character case
  • 18. Shave space off the footer
  • 19. Summary of “Typography”
  • 20. Test: Designing an article
Use of the background in typography
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The vertical-align property, vertical text alignment

If we have a property for horizontal alignment, then shouldn’t there also be one for vertical alignment? Yes, this is what the vertical-align property is for.

This property can be used to align inline elements for a particular line. The simplest example that we will explore in this assignment is to align the <img> image vertically in a text line.

The vertical-align property can be given many values, but the most often used ones are:

  1. top – It aligns the content along the top edge of the line;
  2. middle — It aligns the content along the middle of the line;
  3. bottom — It aligns the content along the bottom edge of the line;
  4. baseline — It aligns the content along the baseline of the line (default value).

Unlike the text-align property, the vertical-align property is applied to the element itself and not to its container:

HTML:
<p>
  <img src="picture.png" alt="I’m a picture">
  I am text inside a paragraph
</p>

CSS:
img {
  vertical-align: middle;
}

In addition to keywords for vertical-align, you also have the ability to set the values in pixels and percentages.

The percentage value (for example, vertical-align: 100%) is calculated relative to the specified height of the line (line-height). A value of 0% is the same as the baseline, and it can be both positive and negative.

The value in pixels (for example, vertical-align: 10px) works similarly to a percentage, only it is calculated in pixels that are either added or subtracted. The 0px value is equivalent to baseline.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 class="page-title">The website of a beginning coder</h1> </header> <main> <div class="avatar-container"> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> </div> <nav class="blog-navigation"> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> <h2>Skills</h2> <dl class="skills"> <dt>HTML</dt> <dd><div class="skills-level skills-level-ok" style="width: 60%;">60%</div></dd> <dt>CSS</dt> <dd><div class="skills-level" style="width: 20%;">20%</div></dd> <dt>JS</dt> <dd><div class="skills-level" style="width: 10%;">10%</div></dd> </dl> </section> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 24px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: "Verdana", sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Add a span with the text Avatar in the markup after the .avatar image,
    2. then assign the vertical-align vertical alignment to the value top for the rule with the .avatar class,
    3. then change the value to middle,
    4. and finally change it to bottom.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.