Cómo hacer que el texto se centre vertical y horizontalmente en una página HTML

Tengo cierta experiencia con Java, C, bases de datos, redes, etc. Pero cualquier cosa relacionada con Html soy un principiante. Lo único que busco es centra dos palabras en el medio de la página (Esta página tendrá solo esas dos palabras).Cómo hacer que el texto se centre vertical y horizontalmente en una página HTML

       WORD1 
          WORDWORDWORDWORD2

que han intentado algún tipo de software WYSIWYG como KompoZer, pero cuando miré al código fuente, se había generado un código estático horrible, con una gran cantidad de <br> verticalmente para lograr el centro de la page.Anybody me podía ayudar encontrar una buena solución a este problema

Fuente

2012-03-22 tt0686

¿También necesita que se centre verticalmente? –

define "en el medio de la página". Centrado arriba y abajo (verticle)? Centrado a la izquierda y derecha (horizontal)? – DwB

Sí, Simon, estoy completamente agradecido por todas las respuestas rápidas, pero el problema es que todas ellas solo resuelven el centrado horizontal. Lo que necesito son ambas posiciones (horizontal y vertical). Ambas palabras deben estar en el centro de la página – tt0686

de centrado horizontalmente es fácil - de centrado verticalmente es un poco complicado en CSS ya que no es realmente compatible (además de las celdas de tabla <td>, que es un mal estilo para el diseño a menos que realmente se necesite una tabla como - bueno - una tabla). Pero puede usar etiquetas html semánticamente correctas y aplicarle propiedades de visualización de tabla.

Esa es una solución posible: hay muchos enfoques, here is a good article on that.

En su caso algo así debería ser suficiente:

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <title>Hello World</title> 
     <style> 

     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      width: 100%; 
     } 

     body { 
      display: table; 
     } 

     .my-block { 
      text-align: center; 
      display: table-cell; 
      vertical-align: middle; 
     } 
     </style> 
    </head> 
    <body> 
    <div class="my-block"> 
     WORD1<br /> 
     WORDWORDWORDWORD2 
    </div> 
    </body> 
</html>

Fuente

2012-03-22 15:58:57 acme

¡Gracias! Solución perfecta y gracias por el enlace también – tt0686

De nada (los puristas html usarían directamente el '' como contenedor de texto en lugar de un div adicional). – acme

eso sí, como si fuera

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

Fuente

2012-03-22 15:49:58 irfanmcsd

Para un principiante esto está bien, pero en general, HTML debe ser tan semántico como sea posible, y el estilo de línea viola ese principio así como la separación de las preocupaciones. –

-1

para centrar el texto se puede utilizar la etiqueta HTML <center>:

<center>Blah</center>

o usted podría utilizar CSS:

<style> 
    .centered_text { 
    text-align:middle; 
    } 
</style> 

<a class='centered_text'>Blah</a>

Fuente

2012-03-22 15:50:35 Adjam

' está obsoleto y no debe utilizarse. '' es, por defecto, 'display: inline' por lo que la propiedad' text-align' no se aplica a él. – Quentin

'Centro' está en desuso. HTML maneja datos, CSS es para visualización. –

Gracias por la información @Quentin y @Chris Sobolewski. No tenía idea de que no deberías usar '

'. Y ahora que lo pienso, tienes razón al usar la etiqueta '' para text-align. Dejaré esta respuesta aquí para que otros puedan leer los comentarios y ver dónde me equivoqué. – Adjam

mejor manera es por decirlo de algún elemento como div. dentro de div puedes centrar fácilmente el texto con text-align: center; (suponiendo que establezcas algo de ancho para ese div). A continuación, puede centro que div en la página mediante la adición de estilo margen automático (margin: 0px auto;)

w3 manual about centering ;-)

Fuente

2012-03-22 15:51:09 Gatekeeper

La forma de "mejores prácticas" para hacerlo sería la siguiente:

Dado que usted dice que es nuevo, Le mostraré toda la estructura del documento. El estilo debe ir en la etiqueta principal para que se cargue primero, y debe avoid inline style as much as possible.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    .center{ 
     text-align:center; 
    } 
    </style> 
    </head> 
    <body> 
     <div class="center"> 
      <p>WORD1</p> 
      <p>WORDWORDWORDWORD2</p> 
     </div> 
    </body> 
</html>

Fuente

2012-03-22 15:51:28

Usted puede poner el texto dentro de un <div> y alinear el texto con CSS:

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

la <div> es un elemento de bloque que significa que se puede estirar a 100% de ancho y el texto será en en el centro de la página

jsFiddle ejemplo

Fuente

2012-03-22 15:52:03 Teneff

Como se menciona en otra respuesta, para un principiante esto está bien, pero en general el HTML debe ser lo más semántico posible, y el estilo de línea viola ese principio así como la separación de las preocupaciones. –

no funciona para IE6 pero aún así.

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

Fuente

2016-01-07 14:30:34

Cómo hacer que el texto se centre vertical y horizontalmente en una página HTML

Respuesta

Cuestiones relacionadas