图片水平对齐text-align

Qwe7

发布于 2022-04-14 14:09:01

1.4K0

文章被收录于专栏：网络收集网络收集

在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。

语法：

text-align:属性值;

说明：

text-align属性取值如下表：

表1 text-align属性

text-align属性值说明

left 默认值，左对齐

center 居中对齐

right 右对齐

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>图片水平对齐</title>

    <style type="text/css">

        div

        {

            width:300px;

            height:80px;

            border:1px solid gray;

        }

        .div_img1{text-align:left;}

        .div_img2{text-align:center;}

        .div_img3{text-align:right;}

        img{width:60px;height:60px;}

    </style>

</head>

<body>

    <div class="div_img1">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

    <div class="div_img2">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

    <div class="div_img3">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

</body>

</html>

在浏览器预览效果如下：

分析：

很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是div，img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（div元素）中设置text-align属性。

四、CSS图片垂直对齐vertical-align属性

在上一节我们介绍了使用text-align属性来定义图片水平对齐方式，我们看一下上一节的预览图：

大家就开始有疑问了，图片水平对齐我们实现了，那如果想对图片进行垂直对齐呢？

在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。

语法：

vertical-align:属性值;

说明：

vertical即“垂直的”，align即“使排整齐”。大家记忆CSS属性要跟在HTML入门教程中记忆HTML标签一样，根据英文意思去记忆就事半功倍了。

vertical-align属性取值如下表：

表1 vertical-align属性取值

vertical-align属性取值说明

top 顶部对齐

middle 中部对齐

baseline 基线对齐

bottom 底部对齐

vertical-align还有sub、super等一些属性值，对于这些我们不需要去理会，因为在实际开发中压根儿用不上。我们只需要使用以上这4个属性值就完全足够了。

举例1：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>vertical-align属性</title>

    <style type="text/css">

        img{width:80px;height:80px;}

        #img_1{vertical-align:top;}

        #img_2{vertical-align:middle;}

        #img_3{vertical-align:bottom;}

        #img_4{vertical-align:baseline;}

    </style>

</head>

<body>

    绿叶学习网<img id="img_1" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>top</strong>）

    <hr/>

    绿叶学习网<img id="img_2" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>middle</strong>）

    <hr/>

    绿叶学习网<img id="img_3" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>bottom</strong>）

    <hr/>

    绿叶学习网<img id="img_4" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>baseline</strong>）

</body>

</html>

在浏览器预览效果如下：

分析：

大家仔细观察一下，“vertical-align:baseline”和“vertical-align:bottom”是有区别的。

举例2：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>vertical-align属性</title>

    <style type="text/css">

        div

        {

            width:100px;

            height:80px;

            border:1px solid gray;

        }

        .div_img1{vertical-align:top;}

        .div_img2{vertical-align:middle;}

        .div_img3{vertical-align:bottom;}

        img{width:60px;height:60px;}

    </style>

</head>

<body>

    <div class="div_img1">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

    <div class="div_img2">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

    <div class="div_img3">

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </div>

</body>

</html>

在浏览器预览效果如下：

分析：

咦？！怎么回事？怎么图片没有按照预期的进行垂直对齐？啊，其实大家误解了vertical-align属性了，vertical-align属性定义是：vertical-align属性定义行内元素相对于该元素的垂直对齐方式。

在这里，大家可能就会想，那怎么在一个元素内设置该元素中的img标签相对于该元素垂直对齐呢？这个问题，我们就留在“CSS进阶教程”中给大家详细讲解。

大家若不知道行内元素是什么东西，请点击这里→“块元素和行内元素”。

疑问

其实vertical-align属性top、middle、bottom、baseline这4个属性值并不是你想象中的那么简单易懂，有了一定CSS基础，你可以深入去了解vertical-align属性。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

图片水平对齐text-align

图片水平对齐text-align

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐