CSS是层叠样式表。下面,我们来看看怎么使用CSS让图片水平垂直都居中吧。
01新建一张文档
在桌面新建一张文本文档,改名为1.txt,如下图所示:
02基础代码
然后打开文本文档,编写基础代码,再把桌面上的老虎图片引入进去,如下图所示:
03后缀名
然后把文本文档后缀名改为.html,如下图所示:
04运行网页
然后在浏览器中运行网页,现在图片有了,只是还没有居中,图片居住代码要用CSS写,如下图所示:
05CSS代码
然后写上CSS代码,如下图所示:
06垂直水平居中
可以看到图片已经垂直和水平居中,如下图所示:
07总代码
<!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
.picTiger{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1.png">
</body>
<html>
分类: 电脑/网络 >>程序设计 >>其他编程语言问题描述:
<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实现效果。