CSS Alignment
CSS Horizontal Align (Horizontal Align)
In CSS, there are several properties for horizontal alignment of elements.
Block element alignment
The block element is an element that occupies the full width and is preceded and followed by line breaks.
Example of block element:
<h1>
<p>
<div>
In this chapter, we will tell you how to align block elements horizontally in layout.
Center alignment, use the margin attribute
The block element can set the left and right margins to "Auto "Align.
The margin attribute can be arbitrarily split into left and right margin settings and automatically specified. The result will be a centered element:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>人心靈的傷痛若無知己來?yè)嵛?，便?huì)荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</body>
</html>Tip: If the width is 100%, alignment has no effect.
Run the program and try it
Use the position attribute to set left and right alignment
One of the ways to align elements One is to use absolute positioning:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來?yè)嵛?，便?huì)荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</div>
</body>
</html>Note: Absolute positioning has nothing to do with document flow, so they can cover other elements on the page.
Run the program and try it
##Use the float attribute to set left and right alignment
Use the float attribute to align One of the methods of elements: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>人心靈的傷痛若無知己來?yè)嵛?，便?huì)荒蕪;人的歡樂若知己來共享，再多的快樂也是悲傷。知己之于人，本是必不可缺。一個(gè)人的痛苦要找人傾訴，一個(gè)人的愁緒要有人來排解。人若沒有知己，心靈便是一片怎樣的荒涼。 青春都是如此，帶著疼痛，卻又義無反顧。世上本無事，庸人自擾之。人生在世，總是有些空城舊事，年華未央;總是有些季節(jié)，一季花涼，滿地憂傷。許多事，看開了，便會(huì)峰回路轉(zhuǎn);許多夢(mèng)，看淡了，便會(huì)云開日出。學(xué)會(huì)思索，學(xué)會(huì)珍藏，微笑領(lǐng)悟，默默堅(jiān)強(qiáng)。</p>
</div>
</body>
</html>Run the program and try it
