Quiero "centrar" el texto y el contenido de mi página web. Ahora no quiero alinear el texto al centro, todavía quiero una alineación a la izquierda, pero quiero márgenes significativos a la izquierda y a la derecha para que todo se vea relativamente centrado. ¿Me puede mostrar el HTML/CSS para lograr esto? Gracias.Contenido central de la página web
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
Creo que this podría ayudarlo.
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
Y en el código HTML, envolver todo en:
<div id='container'>
...
</div>
(Tenga en cuenta que esta respuesta difiere de la de meep en que estoy usando max-width para dar un diseño fluido por debajo 800 píxeles, mientras que él está usando width para dar un diseño fijo.)
... Excepto que la mayoría de las versiones de IE no saben qué es 'max-width'. –
IE7 y superior do. Para IE6, aquí hay un excelente artículo sobre cómo lograr lo mismo: http://javascript.about.com/library/blwidth.htm – RichieHindle
Cree 3 columnas en su página. Todo el texto va en la columna central y se puede dejar alineado.
un vistazo aquí para ver ejemplos http://matthewjamestaylor.com/blog/perfect-3-column.htm
tratar
#div {
margin:0 auto
};
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
* ACTUALIZACIÓN: que añade un poco de CSS que obliga a una barra de desplazamiento vertical en FF según algunos comentarios a continuación.
Es mejor poner text-align: center; en otro que contenga div en caso de que esté usando un editor WYSIWYG que centrará todo su texto en el editor. –
+1 porque estoy de acuerdo, solo estaba dando el ejemplo más simple que pude para el asker, pero en realidad haría exactamente lo que sugieres. –
Esto funciona bien, pero hay un pequeño problema. Lo he aplicado en todas mis páginas y parece que para algunas páginas se mueven ligeramente a la izquierda/derecha. Esto es una distracción cuando mi barra de menú se mueve de una página a otra. – alamodey
un div contenedor dentro del cual uno pone todo su contenido:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
A continuación, agregue un poco de CSS que especifica el ancho y los márgenes de su contenedor div:
#container {
width: 750px;
margin: 0 auto;
}
En algunos navegadores, como IE ejemplo, esto no funcionará Deberá agregar otra envoltura de envoltura de div # que establezca text-align en el centro. En #wrapper, entonces debe establecer text-align a la izquierda nuevamente. –
Nunca he tenido ese problema? He usado ese fragmento de código en cada página web que he hecho. Con doctype XHTML. Si ve: http://dev.korebogen.dk - Está centrado en todos los navegadores. Y el CSS es solo #wrapper {ancho: 960px; margen: 0 auto; } – janhartmann
Bien, quizás no se centre en IE5, pero qué demonios, ¿de todos modos? :-) – janhartmann