header是用的flex布局,想要搜索框水平居中,类似原生IOS里面的布局
不受左右两边内容的影响,依然水平居中
我记得我之前实现过,后来用了flex.css就忘了,麻烦看看用这个怎么实现
.header{
display:flex;
flex-flow:row nowrap;
align-item:center;
justify-content:space-around;
}
详细了解Flex布局见:http://www.ruanyifeng.com/blo...
只有三个元素可以直接用 space-between 撑开
https://jsfiddle.net/straybug...
你后来更新的
不受左右两边内容的影响,依然水平居中
既然不受影响那么只能是 absolute 抽离出来再居中了。
中间那个就用绝对定位,左右边宽度不一样的话会影响中间位置
.search {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
4 回答3.3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
flex-basis:0%; 了解一下