垂直对齐方式学的不是很好。问下关键词值

垂直对齐方式学的不是很好。问下关键词值

垂直对齐方式的关键词值感觉不怎么会用。
最常用的就是middle吗?是不是在一行文本中,他只会对齐和他一行的文字。如果在表格中,他会直接在表格中居中。 在一行中,他只能对齐文本。而不能对齐图片是吗。如果想对齐图片。只能让图片对齐文本。而文本不能去对齐图片。
text-bottom  text-top  是只能对齐文字中最高的或者最低的顶端

top  bottom  是可以对齐行内最高或者最低的顶端 图片最高就对齐图片。对齐一行最高的。
sub super  就和html里面sub sup一样作用。。
请问我的理解有错吗?麻烦老师指出理解错误的地方。

如下:

http://img1.sycdn.imooc.com//climg/5d49bb900001d1c208550386.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好!

(1)同学理解是正确的哦,可以理解为将div转为td,之后给img/span设置vertical-align: middle即可居中

(2)如回复一图中效果,设置display: table;是无法实现整体垂直居中的:

http://img1.sycdn.imooc.com//climg/5d4b81f20001e38704700546.jpg

http://img1.sycdn.imooc.com//climg/5d4b81f9000116a604410531.jpg

只能设置为display: table-cell;无需外层嵌套table

(3)是vertical-align: middle;,这里是误操作删除掉了前面的单词,抱歉给同学带来了误解。

如果帮助到了你 欢迎采纳 祝学习愉快~

好帮手慕码 2019-08-07 10:11:48

同学你好!

同学的理解是可以的。vertical-align最常用的值是middle,不过实现垂直居中设置行高也是可以的。

而vertical-align: middle;这个属性一般应用于内联元素(inline)以及table-cell表格布局中(table-cell是把元素转换为单元格显示,相当于td)。同学是先要实现图片和文字都垂直居中与父级吗?可以参考如下:

http://img1.sycdn.imooc.com//climg/5d4a334700016d3305020555.jpg

http://img1.sycdn.imooc.com//climg/5d4a33530001c20e04310500.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 萌神丶kin #1
    这个意思就是直接把div转成表格td 然后span和img都是td里面的内容。可以直接在div里面居中? 不用刻意写display: table;吗? 有td不是需要有table包裹。
    2019-08-07 20:32:54
  • 提问者 萌神丶kin #2
    不是得给div父元素设置一个teble
    2019-08-07 20:33:37
  • 提问者 萌神丶kin #3
    还有,a:middle; 是啥意思。
    2019-08-07 20:36:32
提问者 萌神丶kin 2019-08-07 02:04:53

从行内转为表单后他可以直接居中。

提问者 萌神丶kin 2019-08-07 01:43:02

研究了好几个小时。只看了这一章,好烦。这章--

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师