                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么这样不能居中

.yoyo{

height:300px;background:#ccc

}

。。。。。

<table><tbody><tr><td class="yoyo">

<div>

<p>就随便一点字而已</p>

<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</td></tr></tbody></table>

这样一段代码并不能做到图片居中，为什么呢？

如此丶

2018-08-11

源自：初识HTML(5)+CSS(3)-升级版 15-9

关注问题我要回答

1705

操作

收起

4 回答

慕斯卡4211204 回答被采纳 +2 积分
2018-08-22

注意这种垂直居中的前提是：所有的Inline-block类型的子元素生效。而p元素属于块元素，它必须霸道的占一行。

1 回复有任何疑惑可以回复我~

#1

慕斯卡4211204

我又看了一下你的问题，我觉得你这个问题真的问的好。我看了下，用这种表格的方法的前提是对所有的inline-block类型的子元素生效，也就是说对所有的内联块元素生效，那么我就试着把这个表格设置为inline-block的元素类型，但是实际效果并不是像有一位朋友说的图片和文字垂直居中。然后，我想了好一会儿，终于发现该方法用于多行文本，多行图片。而这个是文字混合图片。那么文字混合图片的垂直居中又该怎么做呢？有大神知道可以告诉我一下。

2018-08-22 回复有任何疑惑可以回复我~

#2

慕仙6215699 回复慕斯卡4211204

emm为什么不把直接把p标签放到table外面呢？设置一下定位就行了啊

2018-09-08 回复有任何疑惑可以回复我~

娜呜西卡
2019-09-16

文字和图片都要居中，而文字又要单独占一行

在这里可以说两者都居中了

是把文字和图片视作一个整体来进行居中的

0 回复有任何疑惑可以回复我~

独木不成林
2018-08-19

这是当然啦，p标签是块级元素，要单独占一行的，这个时候应该是P和img两个元素在块里面垂直居中了，，我感觉你这个问题有点怪怪的

0 回复有任何疑惑可以回复我~

独木不成林
2018-08-12

给你的table标签设置 margin:0 auto;

0 回复有任何疑惑可以回复我~

#1

如此丶提问者

我的意思是如果我没加“<p>就随便一点字而已</p>”这个，图片就是垂直居中，但是加了，在块里面就不能垂直居中了

2018-08-16 回复有任何疑惑可以回复我~

#2

独木不成林回复如此丶提问者

这是当然啦，p标签是块级元素，要单独占一行的，这个时候应该是P和img两个元素在块里面垂直居中了，，我感觉你这个问题有点怪怪的

2018-08-19 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226193 人
解答问题 18236 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

1 回答为什么我的box4不能居中

6 回答为什么text-align:center不能居中了

8 回答为什么居中不了？

2 回答为什么不能用text-align把表格居中

5 回答为什么input标签选择器不能居中？

搜索更多本课相关问答

为什么这样不能居中

我要回答关注问题

意见反馈帮助中心 APP下载