`
king_tt
  • 浏览: 2084012 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

 
阅读更多

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)



首先,依旧是概念。介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。

行内元素(又叫内联元素inline element):

①不占据一整行,随内容而定,有以下特点:

②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变。

③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。

④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用。

常用的内联元素有

a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签,select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,strong - 粗体强调

块级元素block element:

①总是在新行上开始,占据一整行;

②高度,行高以及外边距和内边距都可控制;

③宽带始终是与浏览器宽度一样,与内容无关;

④它可以容纳内联元素和其他块元素。

常用的块级元素有

div -最常用的块级元素,dl - 和dt dd搭配使用的块级元素,form - 交互表单,h1 - 大标题,hr - 水平分隔线,ol - 排序表单,p - 段落,ul - 非排序列表

互相转换:使用display设置可以使得行内元素拥有块级元素的特性,反之也可以。

如:

<p style="display:inline; text-align:center">我是被设置了内联的块元素p,我现在的表现形式和内联元素一样啦</p>

<span style="display:block; text-align:center">我是被设置了块级元素的span,我现在可以独占一行并且可以设置宽高</span>

display: table-cell ,能把元素当作表格单元来显示,这个非常实用,显示效果也很好,只可惜某些浏览器不够兼容。要注意,和一个合法的<td>元素必须在<table>里一样,

display: table-cell 元素必须作为 display: table 的元素的子元素出现。



现在开始说一下简单的几种基础的居中方式:

1.块中文字水平居中:text-align 用于块级元素,作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。

这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素,但是被控制为内联元素的块元素是不行的)。一句话来说,就是要拥有块元素的特点的那些元素。这个很好理解,居中,肯定是行居中,如果使用它的元素本身不拥有完整的在宽度上的独立空间,它当然没有能力让它内部的文字或者图片居中。(难道要占用别人的地盘里居中,岂不混乱啦)

例子:

<p style="text-align:center">我是正常p,我设置了居中</p>

<span style="display:block; text-align:center">我其实是一个行内元素span哦,我设置了居中,可以居中并且独占一行</span>

<p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p,我设置了居中可是不能居中!</p>

父元素的这个属性对它下面的子元素也起作用,比如一个div设置了text-align居中,则它内部的文字可以居中,它的子div内部的文字也可以居中。但是子元素中文字的居中,是在子div中居中,而不是对于父div居中。也就是,它里面所有的文字,都会相对于最靠近自己的一层div来实现居中。所以,这个属性不能用于div在父div中的整体居中。(不仅仅是div,所有的表现为块元素的元素)。

下面的这段代码,外面一个大的蓝色的div,里面一个小的红色的div。外部的div设置了水平居中,按说里面的图片肯定会居中(运行时确实显示居中),

而内部的div只设置了vertical-align,垂直居中(先不管它)。可是因为它父层的text-align对它也有影响,所以运行时,里面的文字会相对于内部div而居中(注意!不是相对于最外面的div)

  <div style="width:500px; height:200px; background-color:#39F; text-align:center">
    <img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" />
    <div style="width:100px; height:50px; background-color:#F69; display: table-cell;vertical-align:middle">啦啦啦</div>
  </div>

  运行截图:http://www.cnblogs.com/chenmuyue/gallery/image/128289.html(不知道为什么,贴不上来图,望指教)

这个是块元素对内处理的一个属性,不能把这个块自己在它的父容器中居中,若要实现块在父元素中的居中,可以使用:

2块元素自身水平居中(确定设置了宽度的块):margin。这个肯定是接触CSS一开始就知道的了。

一般情况下,可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中,上下左右都会居中。

如果只要水平居中的话,就设置margin-left:auto;margin-right:auto;

3块元素自身水平居中(不确定宽度的块):

  在其他的一些文章中,看到有不少方法来介绍不确定宽度的块的居中的。

  其实简单点说,不需要这么麻烦。我们可以这样来理解,没有明确设定宽度的block,根据块级元素的性质,它默认是独占一行的,所以这个时候block本身就是浏览器窗口的宽度,就不必要设置水平居中了。

  若是此时对块中的内容进行居中的话:

  如果块元素的子元素也为块元素,就对子元素使用margin auto一类的方式就好啦;

  如果块级元素的子元素为行内元素,就用我们一开始介绍的text-align也就可以解决;

  对于子元素为块元素的,也可以用display设置为inline然后再用text-align。

(这些在本文其他地方也都说过了)

4vertical-align用于行内元素中的垂直居中

vertical-align,这个可以用的很复杂。看了一些文章和例子,自己也有点小混乱,只说一下最简单的用法:

  这个属性用于

  1、内联元素(以及被转化为内联元素的块元素)

  2 、display设置为table-cell的元素,

  在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。

  3、<td><tr>这样的元素

  这样的写法:vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性,对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。

5块级元素中的文字图片垂直居中(针对块的高度确定的,这个是从另一个博客上看到的,真的很实用哦,如果块内只有这些文字的话)

文字在层(块级元素)中垂直居中vertical-align属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

<divstyle="line-height:500px;height:500;"></div>

6块级元素中的文字图片垂直居中(块的高度不确定的)

  在块的高度不确定的情况下,其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话,那就自然垂直居中了,其实就不必特意要设置。

如果非要设置什么的话,比如希望块大一些,文字在块中垂直居中好看一点,可以设置内边距,如padding-top:20px;padding-bottom:20px;

  当然,如果上下内边距设置的不一样,就自然不居中了。

7块级元素自身的垂直居中

  设置块级元素自身在父元素中的垂直居中,可以参照块级元素的水平居中的方法(上面说过),设置外边距即可。如果不想设置水平居中,只要设置上下外边距为auto就好。

也可以采用vertical-align:middle;的方式,但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。



评论中有朋友希望能贴参考文章的地址,现在找了当时看的一些来贴一下,只有一部分,很多是随机看的。是疏忽了,应该当时记下来才是~

http://www.blueidea.com/tech/web/2006/3231.asp【CSS实现完美垂直居中】

http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html 【CSS各种居中方法】

http://www.php100.com/html/webkaifa/DIV_CSS/2010/0826/5303.html【完美解决CSS网页水平居中】

http://www.jb51.net/css/66071.html【CSS的各种居中——如何书写高质量代码】

还有很多“百度知道”.....

有的比较复杂的灵活用法就没有写上去,只能保证总结的这些都是用过和试过的,比较常用和基础的,应该是没有问题的。也请大家多多指教呐~

还有利用position的这部分,过几天,再试一试之后再继续做一下笔记~

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html#2666239

(这是别人的博文的链接,关于position的,先贴上来,可以先学习一下~)

分享到:
评论

相关推荐

    CSS里的各种水平垂直居中基础写法心得总结

    介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。 行内元素(又叫内联元素inline element): ①不占据一整行...

    html内联元素和块级元素的基本概念及使用示例

    块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素(行内...

    CSS文档流与块级元素(block)、内联元素(inline)

    CSS文档流与块级元素(block)、内联元素(inline)

    CSS文档流与块级元素(block)内联元素(inline)那点事

    CSS文档流与块级元素(block)内联元素(inline)那点事

    div+css有实例,易学易懂

    6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...

    html 内联元素和html 块级元素概述及区别

    块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈

    进一步理解CSS编程中的块级元素和行内元素

    当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。 Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以...

    【CSS基础学习】行内元素,块级元素,行内块级元素

    文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...

    css块状元素与内联元素以及inline-block

    css块状元素与内联元素以及inline-block

    什么是块元素block和内联元素inline

    什么是块元素block和内联元素inline,什么是块元素block和内联元素inline。。。

    css 块状元素和内联元素

    注:这节课看似挺长,其实内容很少,通过举例子让大家更容易理解而已,不要被眼前的文字和代码吓到哟~ 块状元素 一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度...

    块级元素和内联元素及可变元素汇总

    块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等

    企业网站开发技术实验文档

    实验三:CSS --- 基本的颜色表示(英文单词表示、rgb、16进制)、a标签伪类、盒模型、块级元素页面水平居中、行内元素水平居中、行内元素垂直居中 实验四:CSS --- 标准文档流的特性、块级元素和行内元素的特性

    CSS中的垂直和水平居中完全指南

    CSS Code复制内容到剪贴板 .link { padding-top: 30px;... 水平居中 内联元素(inline or inline-*)居中?  你可以让他相对父级块级元素居中对齐  CSS Code复制内容到剪贴板 .center-children {

    H5+CSS3.zip

    主要包含HTML5+CSS3基础知识,各种常用标签的意义及基本用法示例。 HTML5部分具体内容包括: 语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧...

Global site tag (gtag.js) - Google Analytics