先写上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页面,此时每个部分的文字距离上边界和下边界的距离是相等的。