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:115809browse
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).
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:
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:
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!