图文详解ul中li内容垂直居中和水平居中的方法

时间2024-05-21 01:26:03发布访客分类CSS浏览30

导读：1、li内容垂直居中 flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式...

1、li内容垂直居中 flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下： HTML部分：

CSS部分： .box{ width:300px; height:300px; border:1pxsolidred; } .boxul{ height:300px; display:flex; flex-direction:column; justify-content:center; } .boxulli{ list-style:none; margin:0auto; }

本文转载自中文网

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：图文详解ul中li内容垂直居中和水平居中的方法
本文地址： https://pptw.com/jishu/664536.html

什么是大硬盘vps,大硬盘vps的优势和特点如何使用CSS在线字体和D3实现Google的信息图