text-align属性——图片/段落/文本/超链接设置怎么水平居中？

一、问题概述

二、text-align标签简介

三、代码演示

---

一、问题概述

        今天在需要设置超链接、段落标签的水平居中时遇到困惑。尝试对<a>标签设置text-align，但发现不生效，同时，对<img>图片标签设置text-align也不生效，最终尝试嵌套<div>解决了以上问题。

二、text-align标签简介

        text-align标签用来设置元素中的的文本对齐方式，属性值包括居中对齐（center）、居左（left）以及居右（right）。

        值得注意的是，text-align属性是作用于文本、行内元素以及行内块元素的。

        那么回到之前的问题，为什么text-align不能对行内元素<a>标签以及行内块<img>标签生效呢？这是因为——

        text-align属性只对文本有效，对元素无效，不能直接用text-align设置元素的对齐方式

        那么问题就迎刃而解了，我们需要设置图片/超链接水平居中时，只需要使用盒子div或者文本标签作为父级元素，嵌套需要居中的元素，就可以实现水平居中了。例如：如果需要设置图片水平居中时，我们用盒子div包裹img标签，再设置div的text-align属性为center，就能实现图片的水平居中了。

        听起来有点复杂，接下来让我们结合具体的代码来看看吧~

三、代码演示

        假设我们没有使用div盒子包裹图片/超链接标签，直接对图片设置text-align属性，代码如下：

/* CSS样式 */
img,
a,
.p1 {
    text-align: center;
}

/* HTML代码 */
<img src="../image/Jay.png" alt="">
<a href="#">我是超链接</a>
<p>我是没有text-align属性的段落</p>
<p class="p1">我是有text-align属性的段落</p>

        可以看到图片和超链接都不能实现居中，而设置了text-align的文本可以实现水平居中

       文本可以直接使用text-align标签实现居中，代码如下：

p {
    text-align: center;
}

<p>我是段落</p>

        最终效果如下： 

        我们尝试用div包裹图片，用p标签包裹超链接，给div、p标签设置text-align属性，代码如下：

p,
div {
    text-align: center;
}

<div><img src="../image/Jay.png" alt=""></div>
<p><a href="#">我是超链接</a></p>

        最终可以看到以下效果，也就是用div作为父级元素包裹后，图片<img>可以实现水平居中，用文本标签包裹超链接<a>标签，超链接可以实现水平居中