简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

DIV常用的居中方法_html/css_WEB-ITnose

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

一.DIV常用的居中方法：

①利用相对定位设置div外边距自动调整达到居中效果（ps:如果IE浏览器无效果还要在Body里面加上''text-align:center''这个属性,或是外面再加一层DIV，设置属性''text-align:center''），当然居中也有另一种写法：margin-left:auto;margin-right:auto             最重要的是div必须设置width属性

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

②利用left和margin-left两个属性，先将div块设置为margin-left：50%（这表示这个div块的最左边那条边在中间），然后left属性值为div块宽度的负一半，

符号表示div向左边移动宽度的一半。补充说明一下：直接在css中设置left生效的前提是必须设置父容器position:absolute或relative

 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：
DIV常用的居中方法
source：php.cn
Previous article：9种网页Flash焦点图和jQuery焦点图幻灯片_html/css_WEB-ITnose Next article：不错的CSS3图文列表 还有鼠标悬停图片抖动_html/css_WEB-ITnose
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
Latest Articles by Author
Latest Issues
Best way to preload route data before accessing the route. Before rendering the page for a given route, I want to first get the necessary data synchr...
From 2023-11-17 14:54:42
0
2
379
Module is not defined in Vue project I just created a new Vue application by running npmini tvue@latest as specified in the off...
From 2023-11-17 12:38:53
0
2
394
How to pass key as select option value in v-for when changed (VueJS) I'm using Vue3 and Bootstrap5. I have a select with multiple options. Now I am displaying ...
From 2023-11-17 08:55:24
0
1
276
Catching Guzzle exceptions I'm trying to catch exceptions in a set of tests running on an API I'm developing, and I'm...
From 2023-11-16 14:36:03
0
12
290
Laravel 9.x: Redirect user to view success message after registration I'm trying to return a view with a success message after registering a user, which contain...
From 2023-11-12 22:55:21
0
1
336
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！