In the DIV CSS layout page, it is very important from the layout content to the article text centering on the page, and it is very simple to set the centering with css.
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd'><html xmlns='http://www.w3.org/1999/xhtml'>< /span>
<head> < /span>
<meta http-equiv ='Content-Type' content='text/html; charset=gb2312' />
<title>www .divcss5.com CSS div layout example</title>
<style typetypestyle span>='text/css'>
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px;
height:200px; border:1px solid #000000;}-->
</style>
</head>
<body> < /span>
<div class='waicheng'>I am centered in css An experiment; my layout outer layer has a black side with a side of 1px,
I have a width of 700px, a height of 200px, and a distance of 5px from the top content</ div></body>
</html>
CSS Layout Center Example Browse
We know that left and right are easy to handle, and we can directly use text-align:center; to center the text and picture content, but vertically, if we are at a height of 120px The bottom is vertically centered, the image is centered with the vertical-align:middle;css attribute, and the text is centered by setting the line height method to center the text content. Here we set the height to 120px. This requires setting a line-height:120px; so that through css Attribute class style to achieve text and pictures in the top, bottom, left, and right center.
The code for centering the entire website is as follows:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd'><html xmlns='http://www.w3.org/1999/xhtml'>< /span>
<head> < /span>
<meta http-equiv ='Content-Type' content='text/html; charset=gb2312' />
<title>www Complete centering example of CSS div for .divcss5.com</title>
<style typetypestyle span>='text/css'>
<!--
body{ text-align:center; margin:0 auto;
background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;}.waicheng {color: #0066CC; margin:5px auto;
width:700px; height:120px; line-height:120px; border:1px solid #000000; }.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body> < /span>
<div class='waicheng'>I am centered in css A complete example of centering;
My layout outer layer has a side of 1px
<img src='http://www.divcss5 .com/img/css-logo.gif' alt='image content centered' /></< span class='tag-name' >div></body>
</html>
If you need to reprint, please indicate the source of the article and the source URL: http://www.divcss5.com/shili/s8.shtml
Learn a little every day, Xiaobai quickly advances to the master
Recommended reading:
[51rgb] Zero-Basic JavaScript Video Tutorial Collection
[Xiaobai School] How to Horizontally Align Images and Text in Div
[Design Academy] Web Design E-commerce The four rules of art banner composition
[css3] Realize that the mouse passes through the element, and the superscript line expands from the middle to both sides
[Dry goods] Your web design is always ugly, is it a crime? These kinds of mistakes have been made
[Color matching] Get started quickly! Learn the super easy-to-use "Jiugongge" color matching skills in 10 minutes
【Design Academy】What kind of font should I choose for design? Master these seven routines and design without worry
Design｜DW Tutorial｜AE Tutorial｜Front-end Information
WeChat ID: WEB_wysj
▲Long press the QR code to follow
▼StampRead the original textJoin the group to receive a full set of videos for free
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Center%20the%20layout%20in%20DIVCSSCenter%20the%20background%20imageCenter%20the%20text%20content.html
支付宝扫一扫 
评论列表（196条）
测试