在使用 CSS 设计网页的过程中,div
是经常用到的标签,它可以用来将页面区块分割开来。不过在div
内部,我们经常会遇到让元素向上对齐的问题。
下面是一个div
内部元素垂直对齐的例子:
这是文本内容
这是文本内容
使用上述代码,我们可以发现两个p
元素无法对齐。这是因为默认情况下,元素的对齐方式是基于baseline
垂直对齐的,而不是向上对齐。
为了实现元素向上对齐,我们可以使用flex
布局。将div
设置为display: flex
属性之后,在子元素上设置align-items: flex-start
属性即可。
这是文本内容
这是文本内容
上述代码实现了子元素向上对齐。我们可以通过灵活运用 CSS 的布局特性,让页面更加美观!