Home  >  Article  >  Web Front-end  >  How to set horizontal centering in css

How to set horizontal centering in css

青灯夜游
青灯夜游Original
2021-04-02 16:25:115836browse

How to set horizontal centering in css: 1. Use the "text-align: center;" style to horizontally center inline elements in block-level elements (parent elements); 2. Use "margin: 0 auto;" style, which can horizontally center block-level elements with fixed width in block-level elements (parent elements).

How to set horizontal centering in css

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

Method 1: Use the text-align attribute

Directly set the text-align: center; style to the parent element, you can set the block-level element Horizontal centering of inline elements in (parent element)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background: palevioletred;
				text-align: center;
			}
		</style>

		<div id="father">
			我是测试文本!
		</div>

</html>

Rendering:

How to set horizontal centering in css

Description:

This method is only effective for horizontal centering of text, pictures, buttons and other inline elements (the display attribute is set to inline or inline-block)

(Learning video sharing: css video tutorial)

Method 2: Use the margin attribute

to set the child elements that need to be centeredmargin: 0 auto; style, you can horizontally center block-level elements with fixed width in block-level elements (parent elements).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: palevioletred;
			}
			
			#son {
				width: 100px;
				height: 50px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>

		<div id="father">
			<div id="son">我是块级元素</div>
		</div>

</html>

Rendering:

How to set horizontal centering in css

Description:

This method can only be horizontally centered, and for floating elements Invalid targeting.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to set horizontal centering 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