下面我将一一的介绍关于html元素水平居中的几种方式

一：对于行内元素采用text-align:center;的方式

二：采用margin:0 auto;来实现水平居中显示

三：用table实现

四；块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示

五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分

六:采用css3的flexbox，display:flex;

七：用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中

下面是讲解的具体的代码：

css的水平居中

#page{

width: 100%;

color: white;

}

.he{

width: 100%;

height: 100px;

background: #625050;

text-align: center;

line-height: 100px;

}

.bo{

width: 100%;

background: #6aa087;

}

.fo{

height: 100px;

background: #2f5d34;

}

.content{

height: 100px;

border: 2px solid #fff;

}

.content1{

background: #66a05c;

text-align: center;

}

.content2{

background: #8a5841;

text-align: center;

}

.content2Bo{

height:50px;

width: 60%;

border: 2px solid red;

line-height: 50px;

margin: 0 auto;

}

.content3{

background: #2f5d34;

}

table{

margin: 0 auto;

}

.content4{

background: #8a5841;

text-align: center;

}

.contentBo4{

display: inline;

}

ul li{

list-style-type: none;

}

.content5{

float: left;

position: relative;

left: 50%;

}

.contentBo5{

position: relative;

left: -50%;

background: #231b40;

}

.content6{

width: 100%;

text-align: center;

background: #9ca05c;

display: flex;

align-items: center;

justify-content: center;

}

.content7{

position: relative;

}

.contentBo7{

position: absolute;

left: 0;

right: 0;

width: 80%;

border: 2px solid red;

margin: 0 auto;

text-align: center;

}

下面是对元素水平居中对齐的几个例子以及说明

这是内容区一：实现对行内元素的水平居中显示采用text-align:center;的方式。

这是内容区二:红色区域部分采用margin:0 auto;来实现水平居中显示，当然要写好元素的宽度。

这是内容区三：用table实现。

这是第一行
这是第二行
这是内容区四：本来是contentBo4的块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示。

这是内容区五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分。

这是内容区六:采用css3的flexbox，display:flex;

这是内容区七:用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中。

 总结下：其实实现水平居中只有一下几种思路：

1：对于最简单的行内元素的居中采用text-align:center;设置即可。

2：对于最普通的水平居中采用绝对定位后设置left：50%;后再采用各种方式去实现自身水平差的补回。

3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;加上元素的宽度，在此基础之上就可以采用margin:auto;实现水平对齐了。

4：用css3的Flexbox属性

5:在元素外嵌套table实现，但是这样会有很多层嵌套

6：marin:0 auto;方便的实现已知宽度的水平居中

html td 水平居中,html元素水平居中的几种方法相关推荐

html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
自动化测试元素定位的8种方法：
自动化测试元素定位的8种方法: 1.通过id属性定位: find_element_by_id() 复数形式: find_elements_by_id() 2.通过name属性定位: find_elem ...
HTML元素的隐藏四种方法
HTML元素的隐藏四种方法一.方法一:display设置为none 元素不显示,也不占据任何位置,不占据任何空间(和不存在一样) <!DOCTYPE html> <html lan ...
JAVA 取出Map元素值的三种方法
JAVA 取出Map元素值的三种方法: (1)方法一: 通过Map的keySet()方法获取key 的set ,迭代set元素(每个元素调再用Map的get()方法); (2)方法二 : 通过Map ...
html调整垂直居中,html元素垂直居中的几种方法
元素的垂直居中 #page{ width: 100%; text-align: center; color:white; } #hd{ height: 20px; background: rgba(2 ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
Knockout获取数组元素索引的2种方法,在MVC中实现
在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespace UseIndex.Models {public class ...
python元素定位的八种方法_selenium webdriver基于Python系列之八种元素定位方法
1.id.name.class name.tag name.link text.partial link text.xpath.css selector在 Python 语言中对应的定位方法如下: f ...
js删除指定html及子标签,js中如何删除某个元素下面的所有子元素？（两种方法）...
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结方法一:通过元素的innerHTML属性元素element.innerHTML=""; 方法二:通过元素的remo ...

html td 水平居中,html元素水平居中的几种方法

下面是对元素水平居中对齐的几个例子以及说明

html td 水平居中,html元素水平居中的几种方法相关推荐

最新文章

热门文章