使用text-align: center；的居中问题

最新推荐文章于 2024-07-12 22:31:10 发布

今天会下雨吗

最新推荐文章于 2024-07-12 22:31:10 发布

阅读量8.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_45663697/article/details/105081613

CSS 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文深入探讨了CSS中text-align:center;属性的应用细节，解析了为何该属性仅能使文本和行内元素居中，而无法直接使块级元素如图片居中。并通过实例演示了解决方法，帮助读者掌握更灵活的布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：把<img>和<span>放在div标签里用text-align:center;进行div块内元素居中但是文本居中了，图片没有居中

1. 分析

我们先来说一下 w3cschool对text-align定义：text-align 属性规定元素中的文本的水平对齐方式。通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
用法：
- 在块级元素内使用，能实现它里面包含的文本内容居中
- 在块级元素内使用，能实现他里面的行内块元素或者行内元素居中
- 在块级元素内使用，当子元素也为块级元素时不能让子元素居中
  - 但是块级子元素会继承父元素的text-align:center;，使得其内的文本内容居中
下面是我写的代码
- 从代码中可以发现两个问题
  - 首先，图片不能居中是因为我给图片设置了display:block;，把它转为块级元素了，加上我给图片设置的宽高正好等于容器大小，所以也看不出来他其实在容器内居中了
    - 补充：<img>标签作为可置换元素，虽然是行内元素，但是也可以设置宽高属性
  - 其次，我也通过display:block;把<span>转为了块级元素，然后也没有给他设置宽度，所以他就继承了父元素的宽度，同时也继承了父元素的text-align，使得里面的内容居中了
- 当我把img和span里的display:block;去掉时，会发现span有的内容跑到了图片的旁边，其实这个时候他也是居中的，只不过我给div设置的宽度不够，导致他换行显示了。当把div宽度改为500px的时候。可以看到图片跟内容都是在同一行居中显示的。在同一行是因为他们是行内元素。

<style>
	a{text-decoration: none;}
	div{
	    height: 300px;
	    width: 300px;
	    background: pink;
	    border: 1px solid #555555;
	    text-align: center;
	}
	div a img{
	    width: 245px;
	    height: 245px;
	    margin-top: 10px;
	    display: block;
	}
	div a span{
	    display: block;
	    color: #5555;
	    font-size: 12px;
	}
</style>
<body>
    <div>
        <a href="#">
            <img src="img/cake1.jpg" alt="">
            <span>幸福先生【F先生】</span>
            <span>228.00</span>
        </a>
    </div>
</body>