1.浮动(float),这种情况下默认横向是left,纵向是top方向,所以默认就满足顶端对其;
2.定位(position),这种情况下只要设置要top的值就可以了;
3.display:inline-block;这种情况下,一般不是顶端对其,必须在父级加上一条样式:vertical-align: top才能实现顶端对其。
CSS入门知识-图片水平对齐技巧
在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。
语法:
text-align:属性值
说明:
text-align属性取值如下表:
表1 text-align属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
p
{
width:300px
height:80px
border:1px solid gray
}
.p_img1{text-align:left}
.p_img2{text-align:center}
.p_img3{text-align:right}
img{width:60pxheight:60px}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在浏览器预览效果如下:
分析:
很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是p,img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(p元素)中设置text-align属性。
实现这个效果我给你2种方法!
第一
用dl
dt
dd
结构
<dl>
<dt>前面的小图标</dt>
<dd>文字</dd>
</dl>
在写样式控制
第二
给li里面的文字(a标签)定义背景
这个
应该很实用!
结构
<ul
class="style">
<li><a
href="#">
wenzi
</a></li>
</ul>
样式
.style
li
a
{background:url(前面小图片的路径)
no-repeat
3px
3px(定义小图片的位置,可以自己调试);padding-left:10px(要是小图片后面的文字离图片近了可以这样定义);