css布局之上下两列多个元素对齐

css布局之上下两列多个元素对齐_第1张图片
图片和下面的队名对齐,中间盒子居中
分为上下两个盒子 本来用flex布局的justify-content-around但没法完全对齐,因为每个小盒子的宽度都不一致
改成左右浮动,上下盒子宽度均为40%,然后内容居中对齐
第三列的竖线想居中也要给左右盒子宽度,否则直接用text-align:center没法完全居中

text-align:center只对文字、图片以及行内元素有作用
对浮动元素以及块内元素无作用,可以用display: inline-block设置为行内元素设置
块内元素有宽度可以用margin: 0 auto 设置,或者绝对定位设置
没有宽度可以用transform设置或者flex布局

你可能感兴趣的:(工作,两列,多个元素,对齐)