Home > Article > Web Front-end > How to vertically align elements within a div?
How to vertically align elements within a div?
- WBOYforward
- 2023-08-20 17:37:191180browse
We can easily vertically align elements in a div using any of the following ways −
- position attribute
- Row height attribute
- Fill attributes
Let’s look at the examples one by one -
Use the position attribute to vertically align elements in a div
The position property is used in positioning an element. It can be used in conjunction with the top, right, bottom and left properties to position an element where you want it. Here are the possible values of the position property −
static − Element boxes are laid out as part of the normal document flow, following previous elements and following elements.
relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.
absolute − An element's box is laid out relative to its containing block and completely removed from the normal flow of the document.
fixed − The element box is absolutely positioned and has the behavior description of position: absolute. The main difference is that the containing block of fixedly positioned elements is always the viewport.
Now let’s look at an example of vertically aligning elements in a div using the position attribute −
The Chinese translation ofExample
is:Example
<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
#demo1 {
position: relative;
}
#demo2 {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
#demo1 {
background-color: yellow;
border: 2px solid gray;
height: 15em;
}
#demo2 {
background-color: skyblue;
border: 1px solid orange;
width: 100%;
}
</style>
</head>
<body>
<h1>Vertically Align Elements</h1>
<p>Use the position property:</p>
<div id="demo1">
<div id="demo2">
<p>This is a demo text</p>
<p>This is another demo text</p>
</div>
</div>
</body>
</html>
Use the line-height attribute to vertically align elements in a div
The line-height attribute modifies the height of the inline box that makes up a line of text. The following are possible values for line-height -
normal − Instructs the browser to set line heights within elements to a "reasonable" distance.
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − The height of the row in the element is the given value.
Percentage − The height of a row in an element is calculated as a percentage of the element's font size.
Let us now look at an example of vertically aligning elements in a div using the line-height attribute -
The Chinese translation ofExample
is:Example
<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
p {
margin: 0;
}
#demo {
border: 3px solid yellow;
background-color: orange;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<h1>Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
Use padding attribute to vertically align elements in div
The padding attribute allows you to specify how much space should appear between an element's content and its border. The value of this attribute should be length, percentage, or the word inherit. If the value is inherit, its padding will be the same as its parent element. If using percentages, the percentages are relative to the containing box.
The following CSS properties can be used to control lists. You can also set different padding values for each side of the box using the following properties -
- The padding-bottom specifies the bottom padding of an element.
- The padding-top specifies the top padding of an element.
- The padding-left specifies the left padding of an element.
- The padding-right specifies the right padding of an element.
- The padding serves as shorthand for the preceding properties.
Let us now see an example to Vertically align elements in a div using the padding property −
The Chinese translation ofExample
is:Example
<!DOCTYPE html>
<html>
<head>
<title>Align Element</title>
<style>
.demo {
padding: 60px 0;
border: 2px solid #5c34eb;
background-color: orange;
}
</style>
</head>
<body>
<h1>Vertically Align Element</h1>
<p>Use the padding property:</p>
<div class="demo">
<p>This is demo text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
The above is the detailed content of How to vertically align elements within a div?. For more information, please follow other related articles on the PHP Chinese website!