Ich möchte den Text und den Inhalt meiner Webseite "zentralisieren". Jetzt möchte ich den Text nicht mehr zur Mitte ausrichten, ich möchte immer noch eine linke Ausrichtung, aber ich möchte signifikante Ränder links und rechts, so dass alles relativ zentriert aussieht. Kannst du mir das HTML/CSS zeigen, um das zu erreichen? Vielen Dank.Inhalt der Webseite zentrieren
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
Ich glaube, this könnte Ihnen helfen.
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
Und in der HTML, wickeln alles in:
<div id='container'>
...
</div>
(Beachten Sie, dass diese Antwort von meep ist dadurch unterscheidet, dass ich max-width bin mit einem Fluid Layout unten geben 800 Pixel, während er width verwendet, um ein festes Layout zu geben.)
... Außer den meisten Versionen von IE weiß nicht, was 'max-width' ist. –
IE7 und höher. Für IE6, hier ist ein ausgezeichneter Artikel, wie man dasselbe erreicht: http://javascript.about.com/library/blwwidth.htm – RichieHindle
Erstellen Sie 3 Spalten auf Ihrer Seite. Ihr gesamter Text wird in die mittlere Spalte geschrieben und kann alligniert werden.
Haben Sie hier einen Blick Beispiele http://matthewjamestaylor.com/blog/perfect-3-column.htm
#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>
* UPDATE versuchen: ich einige CSS, die eine vertikale Bildlaufleiste in FF nach einigen Kommentaren unten zwingt hinzugefügt.
Es ist besser, den Text-align: center; auf einem anderen, der div enthält, falls Sie einen WYSIWYG-Editor verwenden, der Ihren gesamten Text im Editor zentriert. –
+1, da stimme ich zu - Ich gab nur das einfachste Beispiel, das ich für den Fragesteller bekommen konnte, aber in Wirklichkeit würde ich genau das tun, was Sie vorschlagen. –
Das funktioniert gut, aber es gibt ein kleines Problem. Ich habe es auf alle meine Seiten angewendet und es scheint, dass sie sich bei einigen Seiten leicht nach links/rechts bewegen. Das ist ablenkend, wenn sich meine Menüleiste von Seite zu Seite bewegt. – alamodey
Haben Sie einen div-Container, in dem Sie Ihre Inhalte alle setzen:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Dann fügen Sie einige CSS die Breite und die Ränder des Containers div Angabe:
#container {
width: 750px;
margin: 0 auto;
}
In einigen Browsern wie IE für Beispiel, das wird nicht funktionieren. Sie müssen ein weiteres Div-Wrapping #wrapper hinzufügen, das text-align auf center setzt. In #wrapper solltest du dann text-align wieder links setzen. –
Ich habe dieses Problem noch nie erlebt? Ich habe diesen Code auf jeder Webseite verwendet, die ich gemacht habe. Mit XHTML Doctype. Wenn Sie sehen: http://dev.korebogen.dk - Es ist in allen Browsern zentriert. Und das CSS ist nur #wrapper {width: 960px; Rand: 0 automatisch; } – janhartmann
In Ordnung - vielleicht wird es nicht in IE5 zentrieren - aber Hölle, wer benutzt das überhaupt? :-) – janhartmann