CSS文字垂直居中

html-css020

CSS文字垂直居中,第1张

01

先写上html代码,如图,内容很简单,就是一个div里有一段文本。

02

再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。

03

如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。

04

要让文本水平居中,我们可以添加样式:text-align: center

要让文本垂直居中,我们可以添加样式: vertical-align: middle和display: table-cell

05

添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

<div id="b8"><a href="#"><img src=pic/28.gif>粘贴</a></div>

CSS样式和普通的一样! 但是一直图片距中,文本偏上,因为图片是16*16的,文本是12号! 如果设置边距,则图片和文本同时下移!

请问应该怎么做才能让图片和文本都垂直距中?(图片和文本都设置文本垂直距中也是没用!)

解析:

假设你的#b8的div的高度height是50px。那么再加上句line-height:50px

这是因为ie不支持垂直对齐,只能通过特殊手段hack一下。

上面的方法是将行高设置到整个div高度,适用于单行垂直居中。

还有几种其他的方法,各有各的用途。

不过都显得很麻烦。甚至有人无奈之下用js实现效果。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:p {border: 1px solid #0b93d5height: 30pxpadding: 10px}。

3、浏览器运行index.html页面,此时每个部分的文字距离上边界和下边界的距离是相等的。