element alignment, centering related

Last Update:2017-01-22 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

For an absolutely positioned element, his horizontal center alignment sets left and right to 0,margin set to auto
For an absolutely positioned element, his vertical center alignment sets the top and bottom to 0,margin set to auto
If you want to position the external alignment, set the corresponding position to 0, then the corresponding margin is set to the negative width

<style>
. container {
Background-color: #ee0000;
width:500px;
height:500px;
Margin:auto;
position:relative;
}
. Container Div {
width:100px;
height:50px;
Background-color: #66ccff;
}

. box1{
Position:absolute;
left:0;
right:0;
Margin:auto;
}

. box2{
Position:absolute;
top:0;
bottom:0;
Margin:auto;
}

. box3 {
Position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto;
}

. box4{
Position:absolute;
left:0;
Margin-left: -100px;
}
</style>

<div class= "Container" >
<div class= "Box1" >box1</div>
<div class= "Box2" >box2</div>
<div class= "Box3" >box3</div>
<div class= "Box4" >box4</div>
</div>

The center alignment of the text is related to:

For word wrapping, set Word-wrap to Break-word and then word-break set to truncate or single

Word boundary truncation can
Of course there will be some problems, in the future text-wrap may also be resolved some, and now there is no support for the bangs

browser)
(You can use White-space:nowrap if you do not want to change lines;)
For the center of the text, the case of a row is very simple, as long as the line-height and the parent element's height

Can

Multi-line has always been a headache problem.

If not fixed height also simple, the inside of span into block, give a paddingtop and bottom open him ...

.....................

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
. box1{
width:100px;
Background-color: #66ccff;
Margin:auto;
Word-break:break-all;
Word-wrap:break-word;
}

. box1 span {
Display:block;
padding:50px 0;

}
</style>

<body>
<div class= "Container" >
<div class= "Box1" ><span>111111111111111111111111111111</span></div>
</div>
</body>

The following is the vertical centering of the parent element's fixed height:

If you refer to the table, there is a solution. But not everyone is a table, although CSS has

Display this thing, but it's compatible AH = = is also ie ...
Table has valign this thing, and the general span can not, in the valign time, can use vertical-

Align to align
If we ignore IE, we have this method.
Display:table the parent element (Word-break:break-all;word-wrap:break-word;

The center of a single line) element display:table-cell;vertical-align:middle in the row;
(found this method in Firefox, the parent element in the center of the container in the location of the bombing, only horizontal

Center, no vertical center ....... ）

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
. container {
Background-color: #ee0000;
width:500px;
height:500px;
Margin:auto;
position:relative;
}
. Container Div {
width:100px;
height:100px;
Background-color: #66ccff;
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
}

. box1{
Word-break:break-all;
Word-wrap:break-word;
display:table;
}

. box1 span {
Display:table-cell;
Vertical-align:middle;

}
</style>

<body>
<div class= "Container" >
<div class= "Box1" ><span>111111111111111111111111111111</span></div>
</div>
</body>

A way to add a small element
This approach involves adding a div or p to the inside, and then placing a placeholder.
Margin and padding are to eliminate the margins of P itself
This is to let an invisible thing prop up the entire height and then set a p to align in the middle
In fact, p did a vertical center.

The rule is P {vertical-align:middle, display:inline-block;}
Invisible element and P sibling (obviously not wrapped in, because he wants to open up space). VI {width:0;height:

100%;vertical-align:middle;display:inline-block;}
You can't give the vi width, or you can't have a line with P.

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
. box1 {
width:100px;
height:200px;
Margin:auto;
Background-color: #ee0000;
Text-align:center;
}

. box1 P {
margin:0;
padding:0;
Vertical-align:middle;
Display:inline-block;
Word-break:keep-all;
Word-wrap:break-word;
Background-color: #66ccff;
}

. VI {
width:0;
height:100%;
Vertical-align:middle;
Display:inline-block;
}
</style>

<body>
<div class= "Middle-box" >
<div class= "Box1" >
<p>
<span>11111111111</span>
<span>22212222122</span>
</p>
<i class= "VI" ></i>
</div>
<i class= "Visible" ></i>
</div>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

element alignment, centering related

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support