1. Elementos horizontales de centrado en línea
En nuestro trabajo real, a menudo encontramos escenas que requieren un centrado horizontal, por ejemplo, por el bien de la belleza, los títulos de los artículos generalmente se muestran horizontalmente.
Aquí puntuamos dos casos: 行内元素nuevamente 块状元素, los elementos de bloque se dividen en elementos de bloque de ancho fijo y elementos de bloque de ancho indefinido. Hoy, ¿entendemos primero cómo centrar horizontalmente los elementos en la línea?
Si el elemento se establece en el texto, imágenes, cuando los elementos en línea, etc., es hasta el nivel medio del elemento padre se ajusta text-align:centera lograr. (Elemento primario y elementos secundarios: como en el siguiente código html, el div es el elemento primario del texto "Quiero estar centrado horizontalmente en el contenedor primario". Por el contrario, este texto es el elemento secundario del div) El siguiente código:
Código HTML:
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
código css:
<style>
.txtCenter{
text-align:center;
}
</style>
2. Elemento central horizontal del bloque de ancho fijo
Cuando el elemento se establece en 块状元素el tiempo utilizado text-align：centerno funciona, entonces también dos posibilidades: fijo anchura elementos de bloque y los elementos de bloques anchos indefinidos .
En esta sección, primero hablamos sobre los elementos de bloque de ancho fijo. (Elementos de bloque fijos: el ancho de los elementos de bloque es un valor fijo).
Los elementos que cumplen las dos condiciones de ancho fijo y bloque pueden centrarse configurando el valor de "margen izquierdo y derecho" en "auto". Veamos un ejemplo de configuración del elemento del bloque div para que esté centrado horizontalmente:
Código HTML:
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
código css:
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
También se puede escribir como:
margin-left:auto;
margin-right:auto;
Nota: El "margen arriba y abajo" del elemento se puede establecer a voluntad.
3. Método de elemento de bloque ancho de resumen de centrado horizontal-indefinido (1)
En el trabajo real, encontraremos la necesidad de “不定宽度的块状元素”centrar la configuración, como la navegación de la página en la página web, porque el número de páginas es incierto, por lo que no podemos limitar su flexibilidad al establecer el ancho. ( 不定宽块状元素: El ancho de los elementos de bloque no es fijo).
Hay tres formas de centrar un elemento de bloque de ancho indefinido (actualmente se utilizan estos tres métodos):
- unirse a
tablela etiqueta - Conjunto
display: inlineMétodo: Al igual que en la primera, para mostrar el tipo de los elementos de línea , los elementos más grandes de propiedad accidental - Set
position:relativeyleft:50%: el uso de posicionamiento relativo modo, el 50% a la izquierda elementos de cambio, es decir, para lograr el objeto centrado
En esta sección hablaremos sobre el primer método:
¿Por qué elegir el método uno para agregar una tableetiqueta? Es hacer uso tablede la adaptabilidad de la longitud de la etiqueta , es decir, no define su longitud ni la longitud predeterminada del cuerpo del elemento primario (la longitud de la tabla está determinada por la longitud de su texto interno), por lo que puede considerarse como un elemento de bloque de ancho fijo , Y luego utilice marginel método de centrado con un bloque de ancho fijo para centrarlo horizontalmente.
El primer paso: agregue una etiqueta de tabla (incluida <tbody>、<tr>、<td>) al elemento centrado que debe establecerse .
El segundo paso: establezca el "centro de margen izquierdo y derecho" para esta tabla (esto es lo mismo que el método de elementos de bloque de ancho fijo).
Los ejemplos son los siguientes:
Código HTML:
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
código css:
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
4. Método de elemento de bloque ancho de resumen de centrado horizontal indefinido (2)
Además de insertar tableetiquetas mencionadas en la sección anterior , puede centrar horizontalmente un elemento de bloque indefinidamente ancho . Esta sección presenta una segunda forma de lograr este efecto. Cambie el displaytipo del elemento a un elemento en línea y configúrelo directamente usando sus atributos.
El segundo método: cambiar los elementos en bloque displayde inlinetipo (elementos en línea a la pantalla) y el uso text-align:centerpara lograr el efecto de centrado. El siguiente ejemplo:
Código HTML:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
código css:
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
Ventajas en comparación con el primer método de este enfoque es sin etiquetas semánticas no aumentan, pero hay algunos problemas: se bloqueará el elemento de displaytipo a inlineconvertirse en un elementos en línea, algunas menos características tales como ajuste Valor de longitud.
5. Método de elemento de bloque ancho de resumen de centrado horizontal-indefinido (3)
Además de insertar etiquetas de tabla y cambiar el displaytipo de elementos mencionados en las dos secciones anteriores , puede centrar los elementos horizontales de ancho indefinido Esta sección presenta el tercer método para lograr este efecto, estableciendo el posicionamiento flotante y relativo.
Método tres: mediante el establecimiento de un elemento principal float, a continuación, establecer el elemento primario position:relativey los left:50%elementos secundarios dispuesto position:relativey left: -50%implementado centrado horizontalmente.
Podemos entender esto: imagine que la capa primaria de la capa ul (la capa div en el siguiente ejemplo) tiene una bisectriz en el medio para dividir la capa primaria (capa div) de la capa ul en dos partes iguales. El código CSS de la capa ul es dividir la capa ul El extremo izquierdo de la capa se alinea con la bisectriz de la capa principal (capa div) de la capa ul; el código css de la capa li alinea la bisectriz de la capa li con el extremo izquierdo de la capa ul (también la bisectriz de la capa div) para lograr El centro de la capa li.
El código es el siguiente:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
código css:
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
Estos tres métodos son ampliamente utilizados y cada uno tiene ventajas y desventajas. El método a elegir depende de la situación específica.
6. Centrado vertical: una sola línea de texto con la altura del elemento principal determinada
En nuestro trabajo real, también encontraremos escenas en las que se requiere un centrado vertical, por ejemplo, cuando los titulares de muchos artículos de periódicos están en los lados izquierdo y derecho, a menudo se configuran en centrado vertical para una buena experiencia del usuario.
Aquí puntuamos dos casos: una sola línea de texto con la altura del elemento padre y varias líneas de texto con la altura del elemento padre .
En esta sección, primero veremos el primer tipo de texto de una sola línea con una altura fija del elemento padre. ¿Cómo configurarlo para que esté centrado verticalmente?
Una línea de texto para determinar la altura del elemento padre del método se centra verticalmente ajustando el elemento padre heighty el line-heightaltamente consistente alcanzado. ( height: La altura del elemento line-height,: como su nombre lo indica, la altura de la línea (interlineado) se refiere a la distancia entre líneas y la línea de base entre líneas en el texto).
line-heightY font-sizela diferencia entre los valores calculados , se convierten en el CSS interlineado . Dividido en dos mitades, añadido a la parte superior e inferior de una línea de texto.
Este tipo de altura de línea de texto y altura de bloque trae una desventaja: cuando la longitud del contenido del texto es mayor que el ancho del bloque, hay contenido fuera del bloque.
El siguiente código:
<div class="container">
hi,imooc!
</div>
código css:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
7. Texto de centrado vertical de varias líneas con la altura del elemento padre determinado (método uno)
Hay dos métodos para centrar verticalmente texto de varias líneas, imágenes, etc. cuya altura está determinada por el elemento padre:
Método a: el uso de inserción table(incluyendo tbody、tr、td)etiquetas, y conjunto vertical-align：middle.
Hay un atributo vertical-alignen css para el centrado vertical . Cuando el elemento primario establece este estilo, será inline-blockútil para los elementos secundarios del tipo. Veamos un ejemplo:
Código HTML:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
código css:
table td{height:500px;background:#ccc}
Debido a que la próxima etiqueta td por conjunto por defecto a los valores de vertical-aligna middle, por lo que no es necesario establecer explícitamente.
8. Texto de centrado vertical de varias líneas con la altura del elemento padre determinado (Método 2)
Además de insertar la tableetiqueta mencionada en la sección anterior , puede centrar verticalmente el texto de varias líneas de la altura del elemento principal. Esta sección presenta otro método para lograr este efecto. Sin embargo, este método tiene poca compatibilidad y solo proporciona una referencia para que todos aprendan.
En Chrome, Firefox e Internet Explorer 8 elementos en bloque anteriormente pueden estar provistos displaycomo table-cell(una unidad de visualización ajuste de la tabla), la activación vertical-alignde atributos no es compatible, pero nota IE6,7 este patrón, la mala compatibilidad.
Código HTML:
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
código css:
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
La ventaja de este método es que no es necesario agregar etiquetas adicionales sin sentido, pero las desventajas también son obvias, su compatibilidad no es muy buena, no es compatible con IE6, 7 y esta modificación se displayha blockconvertido table-cell, destruyendo los elementos de bloque originales Naturaleza.
9. Cambia implícitamente el tipo de visualización
Un fenómeno interesante es establecer una de las siguientes dos oraciones para elementos (independientemente del tipo de elementos anterior, excepto mostrar: ninguno):
-
posición: absoluta
-
flotador: izquierda 或 flotador: derecha
En pocas palabras, siempre que la que aparece en el código html dos o más, los elementos de visualización se visualizan automáticamente los cambios en el tipo de display: inline-block (elementos de bloque) muestran una forma, por supuesto, se puede proporcionar elementos widthy heighta, y El ancho predeterminado no llena el elemento padre.
Como el siguiente código, pequeños amigos todos sabemos que es una etiqueta de elementos en línea, por lo que establecer que widthno tiene ningún efecto, pero establecido position:absolutedespués de ella.
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
código css
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
