Sé que existe una propiedad para alinear automáticamente un elemento en IE con -ms-grid-row-align &
-ms-grid-column-align pero estoy buscando la propiedad justify-content o justify-items para poder centrar todos los elementos a la vez.
¿Hay alguna manera de hacer que esto funcione en IE11? Y si no, ¿cuál es la alternativa?
El siguiente fragmento de código centrará el contenido en,
firefox y cromo
.section_test {
display: grid;
display: -ms-grid;
justify-content: center;
}
.section_test > article {
}
<html>
<head>
<title>test</title>
</head>
<body>
<section class="section_test">
<article>
Test the Article
</article>
</section>
</body>
</html>
Gracias.
------------------------------------
Puedes intentar usar la antigua combinación de absoluto y transformación.
.section_test {
position: relative;
height: 100px;
background-color: gray;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<section class="section_test">
<article>
Test the Article
</article>
</section>
4
¿Esto afectará el CSS de otros navegadores cuando se aplique con un Grid?
- Ahmed
29 de marzo de 2021 a las 2:59
@Ahmed Estoy de acuerdo con la respuesta de Gil. Puede apuntar a IE solo en estilo CSS usando @media all y (-ms-high-contrast: none), (-ms-high-contrast: active) { /* Los estilos CSS de IE10+ van aquí */ }.
- Yu Zhou
29 de marzo de 2021 a las 8:48
@YuZhou - ¿Podrías poner esto también en una respuesta separada? Quizás un ejemplo pueda ilustrar cómo puedo utilizar esta etiqueta con mayor claridad. Gracias
- Ahmed
29/03/2021 a las 15:59
@Ahmed. Agregué una respuesta.
-Yu Zhou
30 de marzo de 2021 a las 7:13
------------------------------------
Puedes apuntar a IE solo en estilo CSS usando la consulta de medios. Debido a que -ms-high-contrast es específico de Microsoft (y solo está disponible en IE 10+), solo se analizará en Internet Explorer 10+. Puedes consultar mi ejemplo de código:
.section_test {
display: grid;
display: -ms-grid;
justify-content: center;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.section_test {
position: relative;
height: 100px;
}
article {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
}
<section class="section_test">
<article>
Test the Article
</article>
</section>
