css 如何元素设置水平居中
来源：互联网 发布：反射原理java 编辑：程序博客网 时间：2024/05/16 13:01
1、行内元素设置水平居中：text-align:center
2、 定宽的块元素 可以使用margin:0 auto;
3、不定宽的块状元素 ，水平居中有三种方法： a、table，b、display:inline; c 、position:relative;left:50%;
（1 ）table标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<div class="wrap">
设置我所在的div容器水平居中
</div>
</body>
</html>
（2）display:inline;
改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">332</a></li>
</ul>
</div>
</body>
</html>
(3) position:relative;left:50%;
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
/*下面是代码任务区*/
.wrap-center{
background:#ccc;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<!--下面是代码任务区-->
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>
- css 如何元素设置水平居中
- CSS/CSS3 如何实现元素水平居中
- css如何让浮动元素水平居中
- css元素水平居中
- css 元素水平居中
- CSS设置元素水平居中、垂直居中方式汇总
- css如何让元素水平居中、垂直居中
- 如何水平居中元素
- CSS 水平居中设置
- CSS 定宽块状元素的水平居中设置
- css设置元素水平垂直居中的方法
- css-元素水平、竖直居中
- css-元素水平、竖直居中
- css-元素水平、竖直居中
- css-元素水平、竖直居中
- css-定位元素水平居中
- CSS：如何让元素在页面中水平垂直居中？
- CSS设置行内元素和块级元素的水平居中、垂直居中
- 有本事就来抓我啊~黑客平均躲藏205天
- find the safest road
- Machine Learning With Spark学习笔记（在10万电影数据上训练、使用推荐模型）
- lustre升级
- android上传文件
- css 如何元素设置水平居中
- sql 联级删除 ON DELETE CASCADE
- 【集群问题解决】Hbase的"Failed deleting my ephemeral node"错误解决
- mac上显示全部隐藏文件
- CocoaPods安装和使用教程
- android--RelativeLayout布局的一些理解
- 当感觉已麻木，告诉 Linux 说reboot
- 关于边界值取值的问题
- 机器学习最佳入门学习资料汇总
