CSS水平居中
一、使用CSS水平居中的三种情况 。
1、行内元素(文本、图片等);
2、定宽块状元素 ;
3、不定宽块状元素(3种方法);
二、具体解决方法。
1、行内元素(文本、图片等):
给父元素设置 text-align:center;
2、定宽块状元素 :
<style>
div{
border:1px solid blue;
width:350px;
height:20px;
margin:20px auto; /*水平居中:上下方向有20px的margin值,左右方向的等margin值由浏览器自动设置*/
}
</style>
<body>
<div>这是个定宽块状元素,居中显示</div>
</body>
3、不定宽块状元素(3种方法):
(1)为需要水平居中的元素加table标签;然后为table设置样式: table{margin:0 auto;}
(2)将块级元素转换为内联元素(eg:div{display:inline;});然后使用text-align:center;来实现居中
<style>
.container{text-align:center;}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
(3)给父元素设置float:left; position:relative; left:50%;
子元素设置position:relative; left:-50% 来实现水平居中
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
display:inline;
float:left; /*有无都可*/
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
CSS水平居中的更多相关文章
- css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...
- css水平居中,竖直居中技巧(二)
css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平居中,竖直居中技巧(一)
css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平居中的各种方法
说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢? 请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- CSS 水平居中
一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...
- CSS 水平居中/布局 垂直居中 (月经问题)
水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
随机推荐
- js库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- NUC_HomeWork1 -- POJ1068
A - Parencodings Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Su ...
- POJ2472106 miles to Chicago
106 miles to Chicago Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 3931 Accepted: 1 ...
- Django的cookie和session
http://www.cnblogs.com/lhj588/archive/2011/10/27/2226976.html
- BZOJ2159 : Crash 的文明世界
$x^k=\sum_{i=1}^k Stirling2(k,i)\times i!\times C(x,i)$ 设$f[i][j]=\sum_{k=1}^n C(dist(i,k),j)$. 则可以利 ...
- Zend studio 10.6 配置XDEBUG
1. 查看PHP版本,下载XDebug 然后去网站http://xdebug.org/download.php下载相应的XDEBUG, 把下载好的文件放到相应的PHP下的EXT目录下,替换之前 ...
- BZOJ1103[POI2007]大都市meg 题解
题目大意: 有一棵树,最先每条边的权值是1,然后给出n+m-1个操作,操作有两种:1.询问一个点到根的路径上的权值和:2.将一条边的权值改为0. 思路: 用dfs序将树化为序列,在dfs序中我们会保存 ...
- topcoder SRM 623 DIV2 CatAndRat
解决本题的一个关键点就是当Cat进入时,此时Rat在哪个位置? 注意移动方向可以随时改变,由于是圆环,故离入口最远点的距离是pi*R,即圆的一半, 当cat进入时(cat的速度大于rat的速度,否则不 ...
- 【BZOJ】2595: [Wc2008]游览计划
题意 \(n * m\)的网格,如果\(a_{i, j} = 0\)则表示景点,否则表示这里的需要的志愿者人数.求一种安排志愿者的方案使得所有景点连通且志愿者最少. 分析 本题可以插头dp,然而有一个 ...
- BZOJ4542: [Hnoi2016]大数
Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个素数P.现在,小 B 提出了 M 个询问,每个 ...