详解HTML中字体使用line-height依然不能垂直居中解决办法

所属分类: HTML/Xhtml / 网页制作 阅读数: 719
收藏 0 赞 0 分享

图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#next-button{
            height: 54px;
    text-align: center;
    color: #fff;
    background: #e2231a;
    line-height: 54px;
    font:16px "Microsoft YaHei","Hiragino Sans GB";
    cursor: pointer;
    margin: 0 auto;
    width:400px;
}
</style></head><body><div id="next-button">下一步</div></body></html>

在其中,我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中,然而,我们却得到了这样的效果:

我们设置的文本垂直居中并没有效果。而我们改代码为

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#next-button{
    width:400px;
    height: 54px;
    text-align: center;
    color: #fff;
    background: #e2231a;
    font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
    cursor: pointer;
    margin: 0 auto;
}
</style></head><body><div id="next-button">下一步</div></body></html>

的时候,就可以垂直居中。原因就在于如果样式声明列表中有line-height与font,则line-height无效,必须与font一起使用。只要样式声明中没有font,就可使用line-height来设置文本的垂直居中了。

到此这篇关于详解HTML中字体使用line-height依然不能垂直居中解决办法的文章就介绍到这了,更多相关line-height不能垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

更多精彩内容其他人还在看

用标准dl,dt,dd标签抛弃table列表

现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTM... 查看详情
收藏 0 赞 0 分享

HTML网页中的URL表示方式

在HTML中,常见的URL有多种表示方式: 相对URL: 复制代码代码如下: example.php demo/example.php ./example.php ../../example.php /example.php 绝对URL: 复制代码代码如下: http://jb5... 查看详情
收藏 0 赞 0 分享

Web页面 自定义选择框Select

select下拉列表表单可能大家都很熟悉,不过默认的下拉列表表单往往会让一些网站觉得丑陋,同时用CSS也很难调整select的样式。因此许多网站位了做出更符合网站风格的select下拉表单,往往会用JS来模拟这种效果。比如我们很熟悉的土豆网,淘宝商城和亚马逊都是用JS做的下拉列表... 查看详情
收藏 0 赞 0 分享

html 标签ID可以是变量

<table id=" <%=var1%>">,调用的时候必须用var1的实际值了 JS里面也是一样 document.getElementById(" <? echo $blogid; ?>"); 具体... 查看详情
收藏 0 赞 0 分享

iframe 自适应大小实现代码

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.htm... 查看详情
收藏 0 赞 0 分享

40多个漂亮的网页表单设计实例

网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的,这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因,尽管如此,甚至在形式设计中它也担当创意中的有效部分。网页表单并非都是乏味的,使用css或flash,你能确保它们具有吸引力且有效。要注意,你需要提出一些独特且... 查看详情
收藏 0 赞 0 分享

HTML减肥 精简HTML标记制作网页

HTML 4HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删除线加以标记)</area></base><body><... 查看详情
收藏 0 赞 0 分享

HTML网页制作教程 谨慎使用iframe标记

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 if... 查看详情
收藏 0 赞 0 分享

HTML 网页头部代码全清楚

以下所有代码全是在<head>...</head>之间,具体内容有:1,<title>…</title>标题元素,帮助用户更好识别文件,有且只有一个。当作为首页或收藏时做文件名。2,<link>&helli... 查看详情
收藏 0 赞 0 分享

HTML 5 Reset Stylesheet

这份css reset是在Eric Meyers的 CSS reset基础上修改出来的,特别针对HTML5调整了相应标签的初始化样式。 /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clar... 查看详情
收藏 0 赞 0 分享
查看更多