Summary of issues related to horizontal and vertical centering of html_HTML/Xhtml

Home

Web Front-end

HTML Tutorial

Summary of issues related to horizontal and vertical centering of html_HTML/Xhtml_Web page production

May 16, 2016 pm 04:36 PM

I have encountered a lot of centering problems recently, so I took some time to summarize them here so that they can be easily found in the future

1. Centered text

Copy code

Code As follows:

<div class="wrap">
I am in the middle...
</div>
.. height line-height text-center（ Can only center a single line)
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
line-height: px;
}

ps:text-align:center just centers the inline elements below the element
1.2display:table-cell (Multiple lines with fixed height centered)

Copy code

The code is as follows:

.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
display:table-cell;
vertical- align: middle;
}

display:table-cell: It doesn’t work in ie67, it’s best to use it together with display:table;
ie67: (It won’t be used in the future. , but let’s put it here)
Method 1: (The height of the em tag is equal to the height of the parent, so centering span and em is equivalent to centering span on the parent)

Copy code

The code is as follows:

<div class="wrap">
<span>
I am in the middle... I am in the middle... I am in the middle... I am in the middle...
</span>
<em></em>
</div>
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align: middle;
display:inline-block;
width:px;
}
.wrap em{
height:%;
vertical-align: middle;
display:inline-block;
}

Method 2: (By adding an absolutely positioned parent tag to the child element, and then matching the relative positioning of the child element to center it horizontally and vertically)

Copy code

The code is as follows:

<div class="wrap">
<span class="span"> ;
<span class="span">I am in the middle... I am in the middle... I am in the middle... I am in the middle...</span>
</span>
</div>
.wrap{
width:px;
height:px;
border:px solid red;
display:table;
position:relative;
overflow: hidden;
}
.wrap .span{
display:table-cell;
vertical-align: middle;
text-align: center;
*position: absolute;
top:%;
left:%;
}
.wrap .span{
*position:relative;
top:-%;
left:- %;
}

1.3padding (inner padding, needless to say)

Copy code

The code is as follows :

.wrap{
width:px;
border:px solid red;
padding:px ;
}

2. Centered element

Copy code

The code is as follows :

2.1position:absolute negative margin (width and height must be available to calculate margin)

Copy code

The code is as follows:

.wrap{
width:px;
height:px;
position:absolute;
top:%;
left:%;
margin-top :-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px;
height:px;
> background:red;
position: absolute;
top:%;
left:%;
margin-top:-px;
margin-left:-px;
}

ps: CSS implements horizontal centering and vertical centering of DIVs

Copy code

code As follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Up and down vertical centering online demonstration DIVCSS5</title>
<style>
#main {
position: absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F
}
/*css note: To facilitate screenshots, wrap the CSS code*/
</style>
</head>
<body>
<div id="main" >DIV is centered horizontally and vertically up and down<a href="http://www.divcss5.com/">DIVCSS5</a></div>
</body>
&lt ;/html>

Introduction to the principle of horizontal and vertical centering
Absolute positioning position:absolute is used here. Use left and top to set the object distance to the top and left to 50%, but if it is set to 50%, the box is actually The centering effect is not achieved, so margin-left:-200px;margin-top:-100px; is set. The trick here is that the value of margin-left is half the width, and the value of margin-top is also half the height of the object. At the same time, set is negative, thus achieving horizontal and vertical centering.

Statement of this Website

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