CSS几种水平居中方法
来源:互联网 发布:json数组存放对象 编辑:程序博客网 时间:2024/05/21 14:09
基础概念
- 行内元素:又叫内联元素,英文是inline。
<span>、<a>、<label>、 <strong> 和<em>
都是。块状元素也可以通过代码display:inline将元素设置为内联元素。- 特点:
- 和其他元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置;
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
- 特点:
- 块状元素:
<div>、 <p>、<h1>、<form>、<ul> 和 <li>
都是。- 特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,和它父元素的宽度一致)。
- 分类:
- 定宽块状元素
- 不定宽块状元素
- 特点:
行内元素的水平居中
给父元素设置text-align:center
即可。
<div style="text-align:center;">我想要在父容器中水平居中显示。</div>
定宽块状元素的水平居中
设置左右margin值为auto即可。
<div style="width:200px;margin:20px auto;";>我是定宽块状元素,我要水平居中显示。</div>
不定宽块状元素的水平居中
不定宽块状元素的水平居中有3种方法:
方法一.加入 table 标签
- 为需要设置的居中的元素外面加入一个 table 标签,包括
<tbody>、<tr>、<td>
,这样,元素变为了一个定宽块状元素。 - 为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
<body><table style="margin:0 auto;"> <tbody> <tr><td> <div>我是需要剧中的文本</div> </td></tr> </tbody></table></body>
注意:这里<body>
不可以指定长度。
方法二.使用display:inline;
将其改变为行内元素,再设置居中。
<style>.container{text-align:center;}.container ul{list-style:none;margin:0;padding:0;display:inline;}.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="#">3</a></li> </ul></div></body>
方法三.给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50%。
.wrap { position:relative; float:left; left:50%;}.wrap-center{ position:relative; float:left; left:-50%;}<div class="wrap"> <div class="wrap-center">我是需要居中的元素。</div></div>
参考资料:
http://www.imooc.com/code/6365
0 0
- CSS水平居中的几种方法
- CSS几种水平居中方法
- 用css实现垂直水平居中的几种方法
- 【css】实现垂直水平居中的几种方法
- CSS实现水平垂直居中的几种方法
- css几种方法使元素水平垂直居中
- CSS水平垂直居中的几种方法
- CSS水平垂直居中的几种方法
- CSS元素水平居中常用的几种方法
- css实现水平垂直居中的几种方法
- CSS几种常用水平垂直居中的方法
- CSS水平垂直居中的几种方法
- css实现水平居中的几种方法
- css水平居中方法
- 水平垂直居中的几种方法
- 水平垂直居中的几种方法
- CSS垂直水平居中8种方法
- css 几种水平垂直居中的方法 及 弹性盒子
- Qt之界面实现技巧
- Qt资料大全
- java基础--内部类与匿名类
- SVN服务器的本地搭建和使用
- java提高篇--IT修真界java接口小结
- CSS几种水平居中方法
- VS2013 Update5 + Tesseract 3.04 API 编译 配置
- VS2013 Opencv2.4.13 配置
- python
- Uva1395 最小生成树
- VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置
- 浮点数舍入规则
- Android自定义账户类型和同步适配器模式 Custom Account Type & SyncAdapter
- Leetcode 243. Shortest Word Distance (Easy) (cpp)