titulo - cómo centrar el texto en html
¿Cómo centrar el elemento html en la ventana del navegador? (18)
¿Cómo puedo colocar algún elemento html, dig div, en la mitad de una ventana del navegador (no en la página, no en la pantalla)? No depende del tamaño de la ventana del navegador, la resolución de la pantalla, el diseño de la barra de herramientas, etc. Por ejemplo, quiero que esté en el medio de la ventana del navegador .
Gracias
Aquí está:
- Solución HTML + CSS solamente: no se necesita JavaScript
- No requiere que sepas el tamaño del contenido por adelantado
- El contenido se centra en el cambio de tamaño de la ventana
Y el ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>HTML centering</title>
<style type="text/css">
<!--
html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
#td_wrap { vertical-align: middle; text-align: center; }
-->
</style>
</head>
<body>
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
</html>
Eche un vistazo a la URL original para obtener información completa: http://krustev.net/html_center_content.html
Puedes hacer lo que quieras con este código. La única condición es que cualquier trabajo derivado debe tener una referencia al autor original.
Espero que esto ayude. El truco es usar posicionamiento absoluto y configurar las columnas superior e izquierda. Por supuesto, el "punto muerto" dependerá del tamaño del objeto / div que está incrustando, por lo que tendrá que hacer algún trabajo. Para una ventana de inicio de sesión utilicé lo siguiente: también tiene algo de seguridad con ancho máximo y alto máximo que en realidad podría serle útil en su ejemplo. Configure los valores a continuación según sus necesidades.
div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top: 20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}
Este es un gran enfoque receptivo al Centrado Absoluto
Compatibilidad del navegador: Chrome, Firefox, Safari, Mobile Safari, IE8-10.
Ventajas:
- Navegador cruzado (incluido IE8-10)
- Sin marcado especial, estilos mínimos
- Sensible con porcentajes y mín. / Máx.
- Usa una clase para centrar cualquier contenido
- Centrado independientemente del relleno (¡sin tamaño de caja!)
- Los bloques pueden redimensionarse fácilmente
- Funciona muy bien en las imágenes
Advertencias:
- La altura debe declararse (ver Altura variable)
- Se recomienda configurar el desbordamiento: automático para evitar el derrame de contenido (consulte Desbordamiento)
- No funciona en Windows Phone
Esto es completamente posible con solo CSS, no se necesita JavaScript: aquí hay un ejemplo
Aquí está el código fuente detrás de ese ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
Esto está marcado y funciona en todos los navegadores.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;}
#inner {margin-left: auto; margin-right: auto;}
#inner {width: 300px; } /* this width should be the width of the box you want centered */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
centered
</div>
</div>
</div>
</body>
</html>
Esto funciona para mi :).
div.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Me sorprendió que nadie dijera sobre position = fixed. Hace exactamente lo que pedí y funciona en todos los navegadores "humanos" e IE desde 7.
No creo que puedas hacer eso. Puede estar en el medio del documento, sin embargo, no conoce el diseño de la barra de herramientas o el tamaño de los controles del navegador. Por lo tanto, puede centrar en el documento, pero no en el medio de la ventana del navegador.
Para centrar un div, debes aplicar el estilo
div
{
margin: 0 auto;
}
Para hacer esto, necesitas saber el tamaño del elemento que estás centrando. Cualquier medida servirá (es decir, px, em, por ciento), pero tiene que tener un tamaño fijo.
El CSS se verá de la siguiente manera:
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Editar : Esto se centra en la ventana gráfica. Solo puedes centrar en la ventana del navegador usando JavaScript. Pero eso podría ser lo suficientemente bueno de todos modos, ya que es probable que desee mostrar un cuadro emergente / modal?
Podría escribir un JavaScript para encontrar la altura y el ancho de la ventana y llegar a la mitad para encontrar el punto central.
Agregue sus cosas dentro de una etiqueta, y configure el div superior e izquierdo desde el javascript hasta las coordenadas del centro que ha encontrado usando Javascript.
Avíseme si necesita el código.
Si entiendo que es correcto, quiere centrar el elemento vertical y horizontalmente en función de la ventana, no del documento. Puede ser un poco molesto, pero puede usar javascript para detectar el tamaño de la ventana, la posición de desplazamiento, el tamaño del elemento, etc. y luego colocar el elemento en el centro de la ventana (no el documento, sino la ventana visible).
Si desea que este elemento permanezca en el módulo de la ventana a medida que se desplaza, deberá capturar el evento de desplazamiento y ajustar la posición.
El código para hacer esto difiere de un navegador a otro.
Si no conoce el tamaño del navegador, simplemente puede centrarlo en CSS con el siguiente código:
Código HTML:
<div class="firstDiv">Some Text</div>
Código CSS:
.firstDiv {
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F1F1F1;
}
Esto también ayuda en cualquier cambio imprevisto en el futuro.
Tuve muchos problemas con el centrado y la alineación hasta que encontré Flexbox como recomendación en una guía.
Una guía completa para Flexbox
Publicaré un fragmento (que funciona con Chrome) aquí para su comodidad:
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
Para más detalles, consulte el artículo.
puedes centrar cualquier objeto en la ventana gráfica, aquí hay un ejemplo usando jquery
$(document).ready(function()
{
posicionar("#midiv");
$(window).on("resize", function() {
posicionar("#midiv");
});
function posicionar(elemento){
var altoDocumento = $(window).height();//alto
var anchoDocumento = $(window).width();
//console.log(altoDocumento);
//console.log(anchoDocumento);
var centroXDocumento = anchoDocumento / 2;
var centroYDocumento = altoDocumento / 2;
//console.log(centroXDocumemnto,centroYDocumento);
var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
var anchoElemento = $(elemento).outerWidth(true);//alto
var centroXElemento = anchoElemento / 2;// centro x del elemento
var centroYElemento = altoElemento / 2; // centro y del elemento
var posicionXElemento = centroXDocumento - centroXElemento;
var posicionYElemento = centroYDocumento - centroYElemento;
$(elemento).css("position","absolute");
$(elemento).css("top", posicionYElemento);
$(elemento).css("left", posicionXElemento);
}
});
el html
<div id="midiv"></div>
Nota: debe ejecutar la función enDomReady y cuando la ventana cambia de tamaño.
aquí está de jsfiddle http://jsfiddle.net/geomorillo/v82x6/
Solución de trabajo
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
Center aligned text.(horizontal and vertical side)
</body>
</html>
<div align="center">
o
<div style="margin: 0 auto;">
div#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}