flex和justify-content的应用

文字在div居中

.text {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 60px 0 60px 10px;
}

justify-content和flex、padding配合使文字垂直居中,通过padding调整上下的空隙

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一.概念 是Flexible Box的缩写,即为“弹性布局”,用来为盒装模型提供最大的灵活性。 二.内容 父组件属...
    Shirley_Hong阅读 2,372评论 0 0
  • // 单行文字隐藏.ell {// display: block;// 文本超出省略text-overflow: ...
    TA鸣阅读 3,582评论 1 0
  • 一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...
    Clover_9fd3阅读 4,613评论 1 4
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,559评论 0 6
  • 一、HTML基础标签 1.HTML简介 超文本标记语言(英语:HyperText Markup Language,...
    是阳仔啊阅读 2,425评论 0 0

友情链接更多精彩内容