Vertical-align Property in Css with Programming Examples

Description

Vertical-align Property in Css with Programming Examples- Do you know how to specify the vertical position of text, images, etc. on the screen with CSS? It is useful to remember how to use it, as it is directly related to the readability of text and the visibility of images! So this time you will learn

• What is the vertical-align property for aligning the vertical position with CSS?
• Using the vertical-align property
• Examples of when the vertical-align property cannot be used and how to deal with it
• What is the line-height property that sets the top and bottom margins of characters?

We will thoroughly explain everything from the basics to applied methods!

What is the vertical-align property?

First, a brief description of the vertical-align property. The vertical-align property is a property for specifying the position of the vertical axis of text.

In addition to top alignment, center alignment, and bottom alignment, there are multiple setting methods. It is a property that is directly related to readability and usability, so it is recommended to remember how to use it!

Using the vertical-align property

Next, I will explain how to use the vertical-align property:

vertical-align: set value

List of setting values:

However, if it is only this, the position displayed for each value is a little difficult to understand. Also, I think that many people find it difficult to understand the difference between top and text-top, and the difference between baseline and middle.So I’ve prepared a diagram to help you understand. Here’s a picture that clearly explains the vertical-align values:

While confirming the above, actually try using the vertical-align property in CSS, and only when the intended result is not obtained, directly specify the value with “number + %” or “number + unit” and set it to the appropriate position we recommend the flow!

How to set the vertical-align property in CSS Programming Examples:

Next, based on the sample code, I will explain how to write concretely!

Example1:

 index.html Code:

Sample main.css code:

output:

If the font size is the same, there is no difference in text-top, text-bottom, baseline, etc., so the font size of the “Programming Digest” and the characters applied to each setting value are different. In this way, you can easily specify the position of the vertical axis of the character.

Before you get used to it, it is recommended to use properties such as “background-color” to check the background color and adjust the position as shown in the sample.

Example2:

Examples of when the vertical-align property cannot be used and how to deal with it

So far, we have explained how to use the vertical-align property, but there are cases where the vertical-align property does not work as it is. That’s when I accidentally set the vertical-align property on a block-level element tag. I prepared a sample in which the previous sample was replaced with a div tag of a block-level element.

Sample index.html Code:

Sample main.css Code:

output:

As you can see, the vertical-align property does not work correctly with div tags.It may be difficult until you get used to it, but when you set the vertical-align property and it doesn’t work, isn’t it a block element? It may be a good idea to keep it in the corner of your head to check.

How to align left/center/right?

So far, I’ve explained the vertical-align property for setting the position of the vertical axis, but when adjusting the position of characters, there are many times when you want to align them with the horizontal axis! Therefore, it is recommended to remember not only the vertical-align property that changes the position of the vertical axis but also the text-align property that changes the position of the horizontal axis! Including the text-align property, the methods for left alignment, center alignment, and right alignment are thoroughly summarized below, so if you are interested, please take a look!

Summary

This time, I explained how to use the vertical-align property to set the vertical axis position of characters. As I mentioned at the beginning, the readability of the text is directly related to the usability of the app. As the saying goes, “God is in the details”, it’s important not to cut corners because it’s the details. It’s easy to use, so please give it a try!