问题
下图是一个网站的标题,在1k的分辨率下,通过调margin达到了居中的效果,然而到2k分辨率下,就变成了下图的鬼样子,标题都歪到左边去了。
我希望在任意缩放下,标题始终居中,当然方法有很多,这里只记录一种方法。
解决方法
可以用flex布局
首先把首行分为3个部分,classLeft,classCenter,classRight,该部分的比例为1:5:1,当然这个比例你也可以自己去设。
然后再classCenter中,里面的内容classTitle要居中;在classRight中,里面的内容要靠右。
代码
上述每个框框都是一个div
所以对于classRow,要有一个flex布局
.classRow{
display:flex;
}
对于classLeft,宽度占1份
.classLeft{
box-flex: 1;/*灵活度*/
-webkit-box-flex: 1; /* Safari and Chrome */
-moz-box-flex: 1; /* Firefox */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
对于classCenter,宽度占5份
.classCenter{
box-flex: 5;
-webkit-box-flex: 5;
-moz-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
}
对于classRight,宽度也只占一份
.classRight{
box-flex: 1;/*灵活度*/
-webkit-box-flex: 1; /* Safari and Chrome */
-moz-box-flex: 1; /* Firefox */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
在classCenter中,里面的内容需要居中,可以利用flex布局justify-content:center居中
.classCenter{
box-flex: 5;
-webkit-box-flex: 5;
-moz-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
display: flex;
justify-content: center;
}
在classRight中,内容要靠右,可以用justify-content: flex-end;靠右。
.classRight{
box-flex: 1;/*灵活度*/
-webkit-box-flex: 1; /* Safari and Chrome */
-moz-box-flex: 1; /* Firefox */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: flex;
justify-content: flex-end;
}
看看最后的效果吧,不同分辨率缩放下都是居中的。
大功告成
总结
页面水平分布上,运用flex布局,进行比例分割以及位置定位(居中,靠右,靠左),实现了要达到的效果。