Home > Web Front-end > HTML Tutorial > Commonly used centering methods for DIV_html/css_WEB-ITnose

Commonly used centering methods for DIV_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:44:02
Original
1059 people have browsed it

1. Commonly used centering methods for DIV:

① Use relative positioning to set the div outer margins to automatically adjust to achieve the centering effect (ps: If the IE browser has no effect, it must be in the Body Add the attribute ''text-align:center'', or add a layer of DIV outside and set the attribute ''text-align:center''). Of course, there is another way to write center: margin-left:auto; margin-right: auto Attribute, first set the div block to margin-left: 50% (this means that the leftmost side of the div block is in the middle), and then the left attribute value is negative half of the width of the div block,

The

symbol means that the div is moved to the left by half its width. Additional explanation: For setting left directly in CSS to take effect, the parent container position must be set: absolute or relative

1 <body>2   <div style="width:500px;margin:0 auto">3        .......4   </div>5 </body>
Copy after login

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7     #myDiv_1{ 8         width:300px; 9         height:200px;10         background-color:#F00;    11         12         margin-left:50%;13         position:absolute;14         left:-150px;15     }16 </style>17 </head>18 19 <body>20     <div id="myDiv_1"></div>21 </body>22 </html>
Copy after login

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template