How to set horizontal alignment in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set horizontal alignment in css

青灯夜游

Feb 23, 2021 pm 05:13 PM

cssHorizontal alignment

How to set horizontal alignment in css: 1. Use the "text-align: center;" style to set the horizontal center alignment of text elements; 2. Use the "margin: auto;" style to set the horizontal center alignment of block elements.

How to set horizontal alignment in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use the text-align: center;

text-align attribute to specify the horizontal alignment of the element text.

Attribute value:

left Arrange the text to the left. Default: determined by the browser.
#right Arrange the text to the right.
#center Arrange the text to the center.
#justify Achieve the effect of aligning text on both ends.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.center {
				text-align: center;
				border: 3px solid green;
			}
		</style>
	</head>

	<body>

		<h2 id="文本居中对齐">文本居中对齐</h2>

		<div class="center">
			<p>文本居中对齐。</p>
		</div>

	</body>

</html>

Rendering:

How to set horizontal alignment in css

##[Recommended tutorial:

CSS video tutorial】

2. Use margin: auto;

margin abbreviation attribute to set all outer margins in one statement distance attribute.

Attribute value:

auto The browser calculates the margins.
#length Specifies the margin value in specific units, such as pixels, centimeters, etc. The default value is 0px.
% Specifies margins as a percentage of the width of the parent element.

To center-align an element horizontally (such as

), you can use margin: auto;.

Setting to the width of the element will prevent it from overflowing to the edge of the container.

The element specifies the width and evenly distributes the empty margins on both sides

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.center {
				margin: auto;
				width: 60%;
				border: 3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>

	<body>

		<h2 id="元素居中对齐">元素居中对齐</h2>

		<div class="center">
			<p>div 元素是居中的</p>
		</div>

	</body>

</html>

Rendering:

How to set horizontal alignment in css

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to set horizontal alignment in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn