CSS入门知识-图片水平对齐技巧

html-css015

CSS入门知识-图片水平对齐技巧,第1张

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属性。

在CSS中，我们可以使用各种方法和技术来使对齐项目，例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法，希望对大家有所帮助。

1、margin : auto

此属性用于将块元素水平对齐到中心。

示例：

注意：使用margin : auto在IE8中不起作用，除非声明了!DOCTYPE。

效果图：

2、position: absolute

我们可以使用position: absolute来对齐项目。

示例：

效果图：

3、text-align: center

我们可以在各种标签中使用text-align: center；它可以将任何用HTML编写的文本对齐。

示例：

效果图：

4、line-height属性

想要垂直对齐项目，我们可以使用line-height属性。line-height 属性设置行间的距离（行高）。

示例：

效果图：

5、padding和text-align属性

我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。

示例：

效果图：

本文参考地址： https://www.html.cn/qa/css3/10403.html

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">

<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>

</ul>

css代码：

<style type="text/css">

.imgWrap li {

float: left

border: solid 1px #666

margin: 10px 10px 0 0

list-style: none

border-collapse: collapse

}

.imgWrap a {

background: #ffa url(images/gridBg.gif) repeat center

width: 219px

height: 219px

display: table-cell/*图片容器以表格的单元格形式显示*/

text-align: center/* 实现水平居中 */

vertical-align: middle/*实现垂直居中*/

}

.imgWrap a:hover {

background-color: #dfd

}

.imgWrap img {

border: solid 1px #66f

vertical-align: middle/*图片垂直居中*/

}

</style>

实现效果如下：