HTML 元素居中的方法

网址：http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html

1. 元素的定位的方法选择：absolute 。

2. 给定元素的宽和高。

3.因为是absolute定位的方法，用百分比的方法，借用left和top的属性，将元素的左上顶点的坐标定位到屏幕的中心。

4. 矫正图片的位置，margin-top和margin-left可以为负数时的属性作用，将margin-left和margin-top的值，分别定位元素宽和高的值的一半，并取为负数。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>Hello The World!</title>
 6         <link href="css/main.css" rel="stylesheet" type="text/css" />
 7         <style>
 8             #feeling{ 9                 background-color: #0000CD;
10                 position: absolute;
11                 width: 800px;
12                 height: 600px;
13                 top: 50%;
14                 left: 50%;
15                 margin-top: -300px;
16                 margin-left: -400px;
17             }
18         </style>
19     </head>
20     <body>
21         <id id="feeling">
22         </id>
23     </body>
24 </html>

转载于:https://www.cnblogs.com/jingjingdidunhe/p/6561881.html

HTML 元素居中的方法相关推荐

css元素居中实现方法
关于css元素居中,查阅资料和实验有以下几种方法: 水平居中 1.最简单的在父元素中加入 text-align:center .这条语句不用关心子元素是否有固定的尺寸大小. 但只能对图片,按钮,文字等 ...
10 个CSS实现元素居中的方法汇总
英文 | https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d3 ...
不定高宽的元素居中的方法
不定宽高情况下的居中方法 1.水平居中方法一: 父层:text-align:center; 子层:display:inline-block; 3.水平垂直居中注意:IE6.7不兼容inline-b ...
css元素居中方法归纳
水平和垂直方向都可居中统一HTML代码: <div class="outer"><div class="inner"></div ...
CSS常用的元素居中方法
参考:CSS: 常用的元素居中方法 CSS居中布局总结 1.水平居中 (1)文本水平居中 text-align: center; (2)块级元素水平居中 ①设置margin margin: auto; ...
css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析一个元素,它有可能有背景,那我要它的背景居中对齐 ...
元素居中的一种特殊方法
通过给需要居中的元素加入如下属性:使用此种方法,该元素会相对第一个具有定位环境的父元素居中 position: absolute; left: 0; top: 0; bottom: 0; right: ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
页面中元素居中定位的几种方法
元素居中定位的几种方法元素居中定位的几种方法方法一父元素子元素方法二父元素子元素元素居中定位的几种方法方法一父元素 position: relative; 子元素 position ...

HTML 元素居中的方法

HTML 元素居中的方法相关推荐

最新文章

热门文章