码迷,mamicode.com
首页 > Web开发 > 详细

HTML 内容居中方式总结

时间:2015-08-04 22:46:12      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

  在HTML网页排版经常会用到关于对其方式的情况,水平居中和垂直居中。特别是水平居中,并不是一个简单的text-align就可以解决所有的情况。

  开始之前普及一点HTML知识,目标很明显,不同的页面结构情况下,要达到居中的效果方式不同。

    常用的块状元素有:

    <div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form>......此外为标签设置display:block也可强制将其他元素转化成块状元素。

    常用的内联元素有:

    <a><span><br><i><em><strong><label><q><var><cite><code>......当然块状元素也可以通过代码display:inline将元素设置为内联元素。

    常用的内联块状元素有:

    <img><input>.....代码display:inline-block就是将元素设置为内联块状元素。

  默认状态下,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,宽度都为100%,即以行的形式占据位置。内联元素都会在所处的包含元素内从左到右水平分布显示。

  水平居中

  a).果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置  text-align:center  来实现的。

  当被设置元素为块状元素时用 text-align:center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。

  b).定宽块状元素,对其板块本身进行设置:

width:500px;
margin:20px auto;

  c).不定宽块状(这是最常遇到的情况),可以细分为3个小方法:

    • 加入 table 标签
      • 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

    • 设置 display;inline 方法
      • 改变块级元素的 dispaly 为 inline 类型  display:inline; ,然后使用  text-align:center ; 来实现居中效果
    • 设置 position:relative 和 left:50%;
      • 通过给父元素设置 float,然后给父元素设置  position:relative  和  left:50% ,子元素设置  position:relative  和  left:-50%  来实现水平居中。

  垂直居中

   a).父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

    height:100px;
    line-height:100px;

   b).父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:

    •   使用插入 table (包括tbody、tr、td)标签,同时设置  vertical-align:middle 。(PS:css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效) 
    • 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的  display:table-cell; ,激活 vertical-align 属性。

HTML 内容居中方式总结

标签:

原文地址:http://www.cnblogs.com/daiyu/p/4703185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!