今天在切图的时候遇到一个问题:
<div class="header">
<div class="arrow_left"></div>
<div class="class_name">{{cname}}</div>
</div>
第一个想法是用向左浮动
.header{
text-align:center
}
.left_arrow{
float:center;
margin:5px;
}
但是发现class_name的宽度虽然确实是100%,但是div中的文字受到兄弟的影响,不能居中。
原因:浮动元素虽然脱离文档流,但是会保持文字环绕。
参考原博:https://blog.csdn.net/cxl444905143/article/details/17361045#commentBox
解决办法:用绝对定位
.header{
position:relative;
text-align:center;
}
.left_arrow{
position:absolute;
margin:5px;
}