首页 > 试题广场 >

假设HTML结构为c...

[不定项选择题]

假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？

parent {
display: table;
}
child {
display: table-cell;
vertical-align: middle;
}

parent {
display: flex;
align-items: center;
}

parent {
position: relative;
}
child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

parent:after {
content: '';
height: 100%;
vertical-align: middle;
width: 0;
}
child {
display: inline-block;
vertical-align: middle;
}

查看正确选项

十字路口上方向你来选

A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。

B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。

C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。

D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。

而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行

发表于 2019-09-01 11:17:48 回复(7)

___292

D选项，伪元素补加inline-block，才正确。

因为vertical-align 只针对行元素和行内块。而伪元素默认为行元素，但行元素不能设置宽高，所以只能用行内块。

用伪元素占满父级高度（伪元素充当子级参考线），然后子元素利用vetical-align垂直居中。

如有误，望指出。

发表于 2021-01-10 12:26:48 回复(0)

T1ng

这难度确定是1星？基础得多扎实才清楚啊

发表于 2020-04-04 12:52:23 回复(0)

懒惰的虫子+

D选项亲测错误

发表于 2019-10-21 16:27:43 回复(4)

不完美卡卡

ABCD都可以

发表于 2019-08-23 11:09:41 回复(0)

爱看剧的查理面向对象

mark

发表于 2022-11-21 23:49:42 回复(0)

牛客855653994号

一共有四种方法能让子元素垂直居中对齐。 1、父元素设置为table元素类型，而子元素中设置为table-cell。 2、利用弹性布局，然后将

发表于 2021-10-16 00:11:20 回复(0)

虚耗

https://codesandbox.io/s/competent-shadow-56pt2?file=/index.html

发表于 2021-04-29 15:18:59 回复(0)

绝不做秃头的nia

<p>
<span>content</span>

</p>

width:100px;
height:100px;
background:green;
}
p:after{
display:inline-block;
content:'';
height:100%;
vertical-align:middle;
width:0;
}
span{
display:inline-block;
vertical-align:middle;
}

发表于 2020-12-04 17:08:42 回复(0)

牛客289961253号

C为什么是正确答案？子元素自身的高度不考虑了吗

发表于 2020-06-26 21:55:43 回复(1)

大胆猪

内容垂直居中?可是BCD都是child垂直居中呀？

发表于 2020-04-22 21:40:50 回复(0)

오용방

这题没有解析吗？大佬吗？

发表于 2019-08-22 16:48:52 回复(1)

提交观点

问题信息

系统工程师运维工程师 2019 360集团 HTML

来自：360公司-2019校...

上传者：小小

难度：

12条回答 1669收藏 2846浏览

假设HTML结构为c...

问题信息

热门推荐

相关试题