Web Front-end
HTML Tutorial
How to center text (horizontally and vertically) within a div block?
How to center text (horizontally and vertically) within a div block?
We can easily center text horizontally and vertically inside a div. Let’s take a look one by one.
Use the text-align attribute to center the text in the Div horizontally
To center text in a div horizontally, use the text-align attribute. The text-align attribute determines the alignment of line boxes within block-level elements. The following are possible values -
left - The left edge of each line box is aligned with the left edge of the block-level element's content area.
right - The right edge of each line box is aligned with the right edge of the block-level element's content area.
center - The center of each line box is aligned with the center of the block-level element's content area.
justify - The edge of each line box should be aligned with the edge of the block-level element's content area.
String - The contents of the cells in the column will be aligned on the given string.
Example
Now let’s center the text in the div horizontally using the text-align attribute -
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Use the justify-content property to center text horizontally in a Div
Example
To center text in a div horizontally, use the justify-content property. Now let us see an example
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Use the padding property to vertically center text in a Div
To center the text in a div vertically, use the padding attribute. The padding property allows you to specify how much space should appear between an element's content and its border. The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties -
- padding-bottom Specifies the bottom padding of the element.
- padding-top Specifies the top padding of the element.
- padding-left Specifies the left padding of the element.
- padding-right Specifies the right padding of the element.
- padding is used as shorthand for the aforementioned properties.
Example
Now let’s see an example of vertically centering text in a div using the padding attribute -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
padding: 50px 0;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered vertically.</p>
</div>
</body>
</html>
Use the line-height property to vertically center text in a Div
To center the text in a div vertically, use the line-height property. The line-height property modifies the height of the inline boxes that make up a line of text.
The following are possible values -
Normal - Instructs the browser to set the line height within the element to a "reasonable" distance.
number - The actual height of the row in the element is this value multiplied by the element's font size.
length - The height of the row in the element is the given value.
Percentage - The height of rows within an element is calculated as a percentage of the element's font size.
Example
Now let’s see an example of vertically centering text in a div using the line-height property -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
line-height: 150px;
height: 200px;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management is a process that ensures the required level of software
quality is achieved.</p>
<div class="demo">
<p> This text in div is centered vertically.</p>
</div>
</body>
</html>
The above is the detailed content of How to center text (horizontally and vertically) within a div block?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to center images in html web pages
Apr 05, 2024 pm 12:18 PM
In HTML, there are two ways to center-align an image: use CSS: margin: 0 auto; to center the image horizontally, and display: block; to make it occupy the entire width. Use the HTML: <center> element to center the image horizontally, but it is less flexible and does not comply with the latest web standards.
How to adjust text position in dreamweaver
Apr 09, 2024 am 02:24 AM
Adjusting the text position in Dreamweaver can be completed by the following steps: Select the text and use the text position adjuster to make horizontal adjustments: left alignment, right alignment, center alignment; 2. Make vertical adjustments: top alignment, bottom alignment, vertical center; 3. Press Shift key and use the arrow keys to fine-tune the position; 4. Use shortcut keys to quickly align: left alignment (Ctrl/Cmd + L), right alignment (Ctrl/Cmd + R), center alignment (Ctrl/Cmd + C).
How to center the text box in html
Apr 22, 2024 am 10:33 AM
There are many ways to center the HTML text box: text input box: use the CSS code input[type="text"] { text-align: center; } text area: use the CSS code textarea { text-align: center; } horizontal centering: Use the text-align: center style on the text box parent element to center it vertically: use the vertical-align attribute input[type="text"] { vertical-align: middle; }Flexbox: use display:
How to center ul content in css
Apr 26, 2024 pm 12:24 PM
Center UL content in CSS: Use the text-align property: Set the alignment of text, including the content of list items. Use the margin attribute: Set the left and right margins of the element, and use margin: auto to achieve horizontal centering. Use the display attribute: Set the element to inline-block, then center it vertically using text-align: center. Use flexbox properties: Horizontal and vertical centering through justify-content: center and align-items: center.
Analysis and solutions to the causes of misaligned typography in WordPress
Mar 05, 2024 am 11:45 AM
Analysis of causes and solutions to misaligned typography in WordPress When building a website using WordPress, you may encounter misaligned typography, which will affect the overall beauty and user experience of the website. There are many reasons for typography misalignment, which may be caused by theme compatibility issues, plug-in conflicts, CSS style conflicts, etc. This article will analyze common causes of misaligned typography in WordPress and provide some solutions, including specific code examples. 1. Reason Analysis Theme Compatibility Issues: Some WordPress
How to center the font in sublime
Apr 03, 2024 am 10:21 AM
Methods to align text in Sublime Text include: using shortcut keys (paragraph: Ctrl + Alt + C, single line: Ctrl + Alt + E), using the "Align" option on the menu bar, and installing alignment plug-ins (such as AlignTab, Alignment Plugin ), or manual alignment (centered: fills spaces, justified: creates borders).
Guide to solving misalignment of WordPress web pages
Mar 05, 2024 pm 01:12 PM
Guide to solving misaligned WordPress web pages In WordPress website development, sometimes we encounter web page elements that are misaligned. This may be due to screen sizes on different devices, browser compatibility, or improper CSS style settings. To solve this misalignment, we need to carefully analyze the problem, find possible causes, and debug and repair it step by step. This article will share some common WordPress web page misalignment problems and corresponding solutions, and provide specific code examples to help develop
How to center the frame in html
Apr 22, 2024 am 10:45 AM
There are four ways to center the HTML frame: margin: 0 auto;: Center the frame horizontally. text-align: center;: Center the frame content horizontally. display: flex; align-items: center;: Center the frame vertically. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);: Uses CSS transforms to position the frame in the center of the fixed-size frame's container.
