左右浮动的元素,再加一个普通元素 ,如何让普通元素居中

左右浮动的元素,再加一个普通元素 ,如何让普通元素居中

今天遇到了这样一个问题,父盒子是display :table ;
两个子盒子分别左右浮动,但是需求需要在中间位置加上一个标题。
因为用的是bootstrap导航组件,不便改组件的布局结构,所以自己加了个a标签;
但是放上之后无论如何无法居中,margin: 0 auto失效。但是margin-left有用,但是title的长度不一样,所以不能固定margin-left;

思考1:margin-left:50%;transform:translateX(-50%);虽然居中但是title掉了下来

在这里插入图片描述

不可行,但看到了希望;

更正:css里面有个计算属性calc(),不知道小伙伴熟悉不(不熟悉可查阅文档)

更正后:margin-left要减去左右两边箭头和导航占去的空间,在进行计算
margin-left: calc(50% - 50px);
transform: translateX(-50%);
在这里插入图片描述

搞定;

注意:在使用calc的时候,记得符号左右要加上空格呦~

猜你喜欢

转载自blog.csdn.net/different9102/article/details/115167981