居中 - 平常我们使用margin 只可以设置margin:0 auto;表示该元素相对父元素水平居中,那么如何用margin 进行垂直居中,这是一个问题,下面就是关于margin 可以水平居中又可以垂直居中的实例 : [解决办法如下]
自动
margin
实现space-around
html:
<ul class="g-flex">
<li>liA</li>
<li>liB</li>
<li>liC</li>
<li>liD</li>
<li>liE</li>
</ul>
复制代码
css方法1: :
.g-flex {
width: 100%; height: 60px; list-style: none;
display: flex;
justify-content: space-between;
/*对应的 需要将li设置flex:1; 文本居中;行高 */
}
.g-flex li{
flex: 1;
text-align: center;
line-height: 60px;
}
复制代码
效果样式是 li 里面的文字水平垂直居中。
css方法2 [自动margin]:
.g-flex{
width: 100%; height: 60px; list-style: none;
display: flex;
/* 要想使得li里的文字内容水平垂直居中 只需要将li设置 margin:auto; */
}
g-flex li{
margin:auto;
}
复制代码
效果同样也是 li 里面的文字水平垂直居中。
自动
margin
实现space-between
html:
<ul class="test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
复制代码
css方法1:
.test{
height: 100px; list-style: none;
display: flex;
justify-content: space-between;
}
.test li{
line-height: 100px;
}
复制代码
css方法2:
.test{
height: 100px; list-style: none;
display: flex;
}
.test li{
margin:auto ;
}
li:first-child{
margin-left: 0;
}
li:last-child{
margin-right: 0;
}
复制代码
当然,值得注意的是,很重要的一点: margin比(justify-content/align-self)优先级要高
转载于:https://juejin.im/post/5cf545056fb9a07ee30e051a