align-items属性是用来设置flex容器中的项目在交叉轴上的对齐方式。默认情况下,align-items的取值为stretch,即项目会被拉伸以填满整个交叉轴。 如果希望将一个div元素居中,可以使用align-items属性的其他取值,如center。这样设置后,div元素会在交叉轴上居中对齐。
当flex布局的父元素使用align-items: center时,子元素都会居中,而若想要单独某一个子元素不居中,而是向左对齐,则应该给子元素添加align-self: flex-start。
align-items: center;似乎可以做到,但有点不对劲,比如 没有什么使它们居中(在您的代码笔中)。 将此添加到您的代码中: .element{display: flex;justify-content: center;/* horizontal alignment */.element__item{display: flex;/* nested flex container */align-items: center;/* vertical alignment */} ...
vertical-align: middle;} 是不是两张图一对比发现,刚才的确没居中,这个才是居中的,至此问题解决。
这个只能不用flex最好 用display：inline-block 不要给scroll设置高度 设置padding吧 ...
啊，谢谢，类名写错了
align-items属性是用来设置flex容器中的项目在交叉轴上的对齐方式。默认情况下,align-items的取值为stretch,即项目会被拉伸以填满整个交叉轴。 如果希望将一个div元素居中,可以使用align-items属性的其他取值,如center。这样设置后,div元素会在交叉轴上居中对齐。
align-items: center;似乎可以做到,但有点不对劲,比如 不幸的是,问题似乎是所选字体的功能。不同的字体将具有不同的下行高度(例如“g”的尾部)以及相对于完整文本框的基线的不同定位,并且看起来某些字体将设置这些值,这样它们可能不会视觉居中。 我修改了您的 CodePen 示例,并强制将第一个元素的font-family设置...
首先查看自己的要垂直居中的元素是不是没有设置高度,如果设置了高度再看一下你设置的高度的单位是px还是% 可能出现问题一 没有设置高度 没有设置高度就在需要布局的地方设置高度即可,如果可以设置px就不用设置百分比。 可能出现的问题二 设置了高度但是是百分比 如果设置了高度,并且高度设置的是百分比...