css水平居中总结
前言
看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用。
一、元素分类
1.行内元素
行内元素,也就是内联元素,可以在一行内显示多个。注:元素的高度、宽度、顶部底部边距均不可设置,元素的高度和宽度就是它包含的文字或图片的高度和宽度。
行内元素有这些:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
当然有些时候可以通过以下代码变成块状元素:
display: block;
2.块状元素
块状元素,霸占一行,别的元素要另起行才可以。注:元素的高度、宽度、顶部底部边距可设置,元素宽度在不设置的情况下,是它本身父容器的100%。
块状元素有这些:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
同样的你也可以通过以下代码把块状元素变为行内元素:
display: inline;
3.内联块状元素
内联块状元素,和行内元素相似,都在可以显示在一行上。注:元素的高度、宽度、行高以及顶和底边距都可设置,实用性较强。
内联块状元素有这些:<img>、<input>
可以通过以下代码把其他元素变为内联块状元素:
display: inline-block; 注:inline-block不支持IE6、IE7,使用时需要额外加上*display:inline;*zoom:1;以触发layout。
二、正常元素的居中方法
a.使用左右外边距自适应方法:
width: 200px;
margin: 0 auto; /*使用此方法需要变为块状元素,且需要固定宽度*/
b.使用外边距加定位方法:/*此方法不适用于行内元素,需要变为块状元素或内联块状元素*/
width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px; /*250px是元素的宽度除以2得到,且需要进行定位*/
c.父元素设置text-align: center; /*使用此方法需要变为行内元素或内联块状元素*/
d.对于宽度不确定的元素,可以在外层套上一个table标签,然后给table使用margin: 0 auto来居中:/*此方法只适用于块状元素*/
table{
width: 960px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
}
.center{
border: 1px solid blue;
}
HTML代码:
e.对于宽度不确定的元素,给它和父元素进行定位,分别设置left: -50%和left: 50%,然后实现水平居中:/*此方法只适用于块状元素*/
.father{
position:relative;
left:50%;
width: 960px;
height: 300px;
background: yellow;
}
.children{
height: 30px;
background:#ccc;
position:relative;
left:-50%;
}
HTML代码:
<div class="father">
<div class="children">aaaaaaaa</div>
</div>
f.使用css3的flexbox居中,要在父元素中设置display:flex和justify-content: center,此方法适用于所有元素,但是存在IE不兼容的情况,PC页面慎用。
flex使用方法:
display:flex; /*默认为块状元素*/
display:inline-flex; /*变成行内元素*/
居中实例:
.father{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
三、浮动元素的居中方法
浮动元素:即使用float: left|right进行浮动操作后的元素。
1.浮动元素不确定宽度时,使用绝对定位,加入left: 50%和margin-left: -81px。
.children{
text-align: center;
float: left;
height: 30px;
position: absolute;
left: 50%;
margin-left: -81px;
background: #ccc;
}
2.浮动元素固定宽度时,使用相对定位,加入margin-left: 50%和left: -width/2。 /*width/2即固定宽度的一半*/
.children{
width:500px;
height:300px;
float:left;
margin-left:50%;
position:relative;
left:-250px;
background-color:#CCC;
}
内容持续更新中...
如有错误的地方或者更好用的方法,希望大家能在评论区留言指正,让我们共同进步!
css水平居中总结的更多相关文章
- css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...
- CSS水平居中
三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...
- 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"> & ...
随机推荐
- Nginx反向代理 负载均衡 页面缓存 URL重写及读写分离
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- 关于session更新的问题
最近在学习用ssh框架做一个实习生招聘系统,已经做了大半.今天突然想到一个问题,在登录的时候我把用户的所有信息放到session中去,那么我不同用户同时登录的时候session中的信息是否会被覆盖掉( ...
- /boot/grub/menu.lst详解
基本概念menu.lst有时候也叫grub.conf,但是/boot/grub/下会有一个名叫menu.lst的符号链接指向它.它是grub引导系统的配置文件.基本选项default 0timeout ...
- I/O流的学习
一.I/O流 1.判定是输入还是输出我们应该站在程序的立场: 2.判断传输的是字节还是字符,从而决定管道的大小,字节传递是根本,可以传递所有的数据类型,字符传递专门用来传递文本数据,字节主要用来传递二 ...
- hdu3001 Travelling
Travelling Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- PROCESS_YIELD()宏使用及过程分析<contiki学习笔记之八>
好吧,昨晚上研究了switch()的底层实现原理--发现它并不是一般C语言教科书上那样所言,当然,这对于本身就非常熟悉汇编的同学来说,是小菜一碟.世界上,很多事情是巧合与必然的结合体,没有无缘无故的爱 ...
- 为什么监听不到开机广播action.BOOT_COMPLETED
为什么监听不到开机广播action.BOOT_COMPLETED 1. 说明 Android手机开机后,会发送android.intent.action.BOOT_COMPLETED广播,监听这个广播 ...
- sessionapplicationStruts2中访问web元素
本文是一篇关于sessionapplication的帖子 取得Map类型request,session,application,实在类型 HttpServletRequest, HttpSession ...
- #define使用方法
1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,假设在程序里面写 if(i<MAXTIME){.........} 编译 ...
- javascript常用方法整理--数组篇
1. arrayObject.slice(start,end) 从已有的数组中返回选定的元素 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...