pregunta
La imagen de abajo es el título de un sitio web. Con una resolución de 1k, el efecto de centrado se logra ajustando el margen. Sin embargo, con una resolución de 2k, se convierte en un fantasma como la imagen de abajo, y el título está sesgado hacia la izquierda.
Espero que el título esté siempre centrado debajo de cualquier zoom. Por supuesto, hay muchos métodos, y aquí solo se registra uno.
Solución
Puede usar el diseño flexible
para dividir primero la primera línea en 3 partes, classLeft, classCenter y classRight. La proporción de esta parte es 1: 5: 1. Por supuesto, también puede establecer esta proporción usted mismo.
Luego, en classCenter, el contenido classTitle dentro debe estar centrado; en classRight, el contenido dentro debe estar bien.
el código
Cada uno de los marcos anteriores es un div,
por lo que para classRow, debe haber un diseño flexible
.classRow{
display:flex;
}
Para classLeft, el ancho representa 1 parte
.classLeft{
box-flex: 1;/*灵活度*/
-webkit-box-flex: 1; /* Safari and Chrome */
-moz-box-flex: 1; /* Firefox */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Para classCenter, el ancho representa 5 partes
.classCenter{
box-flex: 5;
-webkit-box-flex: 5;
-moz-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
}
Para classRight, el ancho solo representa una
.classRight{
box-flex: 1;/*灵活度*/
-webkit-box-flex: 1; /* Safari and Chrome */
-moz-box-flex: 1; /* Firefox */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
En classCenter, el contenido del interior debe estar centrado, puede usar el diseño flexible justificar-contenido: centro a centro
.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;
}
En classRight, el contenido debe estar a la derecha, puede usar justify-content: flex-end; a la derecha.
.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;
}
Eche un vistazo al efecto final, está centrado bajo una escala de resolución diferente.
ya terminaste
Resumir
Para la distribución horizontal de la página, se utiliza el diseño flexible para realizar la división proporcional y el posicionamiento de posición (centro, derecha, izquierda) para lograr el efecto deseado.