我可以在 Flexbox `` 沒有包裝器的元素 `` 中垂直對齊文字嗎？

Flexbox 內的垂直文字對齊方式

查詢

內的垂直文字對齊方式使用Flexbox 的元素被證明具有挑戰性。刪除中間包裝

是否可行？通常接收align-items:center屬性，同時保留動態高度管理的元素？

解決方案

要在Flexbox內垂直對齊文本，請使用align-items: center而不是align-self ： 中心。此修改對齊 Flex 容器內的子元素，在本例中為

。 element.

說明

align-self 屬性針對的是 Flex 項目，而align-items 則針對的是 Flex 容器。由於

元素不是 Flex 容器，align-self 對
• 沒有影響。元素。相反，align-items 可以用在
• 上。垂直對齊其子元素的元素。