请选择 进入手机版 | 继续访问电脑版

站长赚钱网赚钱论坛

 找回密码
 立即注册
查看: 191|回复: 2

[网站模板论坛] CSS如何让文字垂直居中

[复制链接]

51

主题

96

帖子

251

积分

版主

Rank: 7Rank: 7Rank: 7

积分
251
发表于 2017-12-28 14:29:03 | 显示全部楼层 |阅读模式
如果有下列代码:

    <div class="wrapper">
        hello world
    </div>

想让hello world在wrapper类中垂直居中,可以为wrapper中添加如下CSS:

    .wrapper:after {
        display:inline-block;
        width:0;
        height:100%;
        vertical-align:middle;
        content:"";
    }

回复

使用道具 举报

51

主题

96

帖子

251

积分

版主

Rank: 7Rank: 7Rank: 7

积分
251
 楼主| 发表于 2017-12-28 19:40:54 | 显示全部楼层
网页css布局:div水平居中各种设置形式
  网页制作Webjx文章简介:在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法.
  在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法:
  一、margin:auto 0 与 text-aligh:center
  在现代浏览器(如Internet Explorer
7、Firefox、Opera等)现代浏览器实现水平居中的方法很简单,只要设定到左右两侧的空白为自动即可。意即:

  1. #wrap { margin:0 auto;}
复制代码

  上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。请在现代浏览器(如Internet Explorer
7、Firefox、Opera等)中运行现在的代码:
在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可
  1. <p>  div#wrap {</p><p>  width:760px;</p><p>  margin:0 auto; /*这里的0可以任意值*/</p><p>  border:1px solid #ccc;</p><p>  background-color:#999;</p><p>  }</p>
复制代码

 上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的,不过幸好它有自己的解决办法。在Internet
Explorer中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center,这样页面内所有的元素都会自动居中,同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码:
  body {text-align:center;}
  1. <p>  #wrap {text-align:left;}</p><p>  这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果,我们就可以这样写我们的代码:</p><p>  body { text-align:center; }</p><p>  #wrap { text-align:left;</p><p>  margin:0 auto;</p><p>  }</p>
复制代码

 在Firefox等现代浏览器设定页面元素的水平居中,只要指定margin:0 auto;即可
  1. <p>  div#wrap {</p><p>  width:760px;</p><p>  margin:0 auto; /*这里的0可以任意值*/</p><p>  border:1px solid #ccc;</p><p>  background-color:#999;</p><p>  }</p><p>  在Internet Explorer 6 及以下的版本中我们还要做以下的设置:</p><p>  body { text-align:center; }</p><p>  div#wrap {</p><p>  text-align:left;</p><p>  }</p>
复制代码

 不过这里有一个前提,就是设置居中的元素要有固定的宽度,比如这里我们设定了为760像素。
  二、相对定位与负的边距
  对于wrap进行相对定位,然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现:
  1. <p>  #wrap {</p><p>  position:relative;</p><p>  width:760px;</p><p>  left:50%;</p><p>  margin-left:-380px</p><p>  }</p>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|站长赚钱网赚钱论坛 ( 皖ICP备13004459号 )

GMT+8, 2018-8-21 22:08 , Processed in 0.122644 second(s), 22 queries .

Powered by 冯站长之家 Discuz! X3.4

© 2001-2017 冯站长之家论坛

快速回复 返回顶部 返回列表