css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

html-css022

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中,第1张

1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。

2、打开浏览器查看结果,图片已处于正中状态。

3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。

4、在浏览器查看结果,图片水平,垂直均居中。

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让图片水平垂直都居中吧。

01

新建一张文档

在桌面新建一张文本文档,改名为1.txt,如下图所示:

02

基础代码

然后打开文本文档,编写基础代码,再把桌面上的老虎图片引入进去,如下图所示:

03

后缀名

然后把文本文档后缀名改为.html,如下图所示:

04

运行网页

然后在浏览器中运行网页,现在图片有了,只是还没有居中,图片居住代码要用CSS写,如下图所示:

05

CSS代码

然后写上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>