Home > Developer > Web Develop
One, margin:0 Auto;
The most tried method, simple and practical.
Second , Vertical-align:middle;
Applies only to inline elements, such as a div with a picture and text that aligns the lines of the picture with the text.
<style type= "Text/css" >
. fd{
width:500px;
height:200px;
}
img{
Vertical-align:middle;
}
</style><div class= "FD" >
<span> focus on the front end, user experience-Hebei </span>
</div>
Three , position:relative;
The Position property of the parent element is set to relative and left:50% by setting the float float to the parent element, and the child elements are set position:relative and left:-50% to achieve horizontal centering. The benefit is that the block-level elements can still be displayed as display:block, without adding meaningless tags and not adding nesting depths. The exact point is the setting of the position:relative, which brings some side effects. Here is the third method of the instance code, put in the body tag inside it.
<div style= "Width:400px;height:300px;background: #333;" >
<ul style= "margin:0 auto;float:left; position:relative; Left:50%;list-style:none; padding:0; " >
<li style= "position:relative; Left:-50%;float:left ">OKOKOKOKKOOKK</li>
</ul>
</div>
Iv. Margin-left;
To set the center by the left of margin, you need to try more parameter values.
V. Padding-left;
By padding the left to set the center, you need to try more parameter values.
Six, text-align:Center:
The text-align:center is defined first in the parent element, which means that the text content within the parent element is centered;
Seven , center (picture center)
Body{backgroud:url ("1.png") #FFF no-repeat Center;}
The key is the final center, which defines the position of the picture. It can also be written as "top left" or "bottom right", or write the value "50 30".
Eight, JS control center
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html;charset =utf-8 "/>
<title></title>
<style type=" text/css ";</style>
<body>
<div style= "border:solid; width:100%; height:100px";
Description: JS According to the page size changes set div left and right center, To apply JS code, set Position:absolute
<p> focus on the front end, focus on user experience-ji </p>
</div>
<div id= "FD" style= " Border:solid; background-color:red; width:100px; Position:absolute "
This is the center Div
</div>
<script type=" Text/javascript ";
var fd = document.getElementById ("FD");
var fd_resize = function () {
Fd.style.left = (document.body.clientwidth-100)/2;//100 is mydiv width
Fd.style.hei Ght = DOCUMENT.BODY.CLIENTHEIGHT/2;
}
Fd_resize ();
Window.onresize = fd_resize;
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
