腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
首页
标签
flex
#
flex
关注
专栏文章
(226)
技术视频
(0)
互动问答
(2)
如何将文本垂直对齐?
2
回答
center
、
flex
、
教程
我是谁
前美食创业者,现美食投资人
使用align-items: center,而不是align-self: center。 这是代码,只需进行一次调整即可完成所有工作: ul { height: 100%; } li { display: flex; justify-content: center; /* align-self: center; <---- REMOVE */ align-items: center; /* <---- NEW */ background: silver; width: 100%; height: 20%; } 该align-self属性适用于弹性项目。除了你li的不是一个弹性项目,因为它的父 - ul- 没有display: flex或display: inline-flex应用。 因此,这ul不是一个弹性容器,li它不是一个弹性物品,并且align-self不起作用。 该align-items属性align-self与之类似,但也适用于柔性容器。 由于li是一个弹性容器,align-items可用于垂直居中子元素。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; /* align-self: center; */ align-items: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> codepen演示 从技术上讲,这是如何align-items和align-self工作: 该align-items属性(在容器上)设置的默认值align-self(在项目)。因此,align-items: center意味着所有的弹性项目将被设置为align-self: center。 但是你可以通过调整align-self个别项目来覆盖此默认值。 例如,您可能需要等高度的列,因此容器已设置为align-items: stretch。但是,一个项目必须固定在顶部,因此它被设置为align-self: flex-start。 文本如何是一个弹性项目? 运行如下代码: <li>This is the text</li> 从CSS规范: 9.2.2.1匿名内联框 任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。 Flexbox规范提供了类似的行为。 4.灵活的项目 Flex容器的每个流入子代都成为一个Flex项目,并且每个连续运行的文本都直接包含在Flex容器中,并被包装在一个匿名Flex项目中。 因此,该文本li是一个弹性项目。...
展开详请
赞
0
收藏
0
评论
0
分享
使用align-items: center,而不是align-self: center。 这是代码,只需进行一次调整即可完成所有工作: ul { height: 100%; } li { display: flex; justify-content: center; /* align-self: center; <---- REMOVE */ align-items: center; /* <---- NEW */ background: silver; width: 100%; height: 20%; } 该align-self属性适用于弹性项目。除了你li的不是一个弹性项目,因为它的父 - ul- 没有display: flex或display: inline-flex应用。 因此,这ul不是一个弹性容器,li它不是一个弹性物品,并且align-self不起作用。 该align-items属性align-self与之类似,但也适用于柔性容器。 由于li是一个弹性容器,align-items可用于垂直居中子元素。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; /* align-self: center; */ align-items: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> codepen演示 从技术上讲,这是如何align-items和align-self工作: 该align-items属性(在容器上)设置的默认值align-self(在项目)。因此,align-items: center意味着所有的弹性项目将被设置为align-self: center。 但是你可以通过调整align-self个别项目来覆盖此默认值。 例如,您可能需要等高度的列,因此容器已设置为align-items: stretch。但是,一个项目必须固定在顶部,因此它被设置为align-self: flex-start。 文本如何是一个弹性项目? 运行如下代码: <li>This is the text</li> 从CSS规范: 9.2.2.1匿名内联框 任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。 Flexbox规范提供了类似的行为。 4.灵活的项目 Flex容器的每个流入子代都成为一个Flex项目,并且每个连续运行的文本都直接包含在Flex容器中,并被包装在一个匿名Flex项目中。 因此,该文本li是一个弹性项目。
热门
专栏
韩曙亮的移动开发专栏
3.9K 文章
61 订阅
用户7873631的专栏
936 文章
32 订阅
陶士涵的菜地
1.7K 文章
51 订阅
大前端(横向跨端 & 纵向全栈)
783 文章
40 订阅
Jerry的SAP技术分享
10.8K 文章
159 订阅
热门
标签
更多标签
ICP备案
云服务器
对象存储
云点播
即时通信 IM
实时音视频
DNS 解析 DNSPod
内容分发网络 CDN
人脸识别
私有网络
python
java
javascript
人工智能
android
领券