Heim >Web-Frontend >CSS-Tutorial >Zentrieren Sie das Layout_zentrieren Sie das Hintergrundbild_zentrieren Sie den Textinhalt in DIV+CSS
Zentrieren Sie das Layout_zentrieren Sie das Hintergrundbild_zentrieren Sie den Textinhalt in DIV+CSS
- 高洛峰Original
- 2016-12-12 14:39:181866Durchsuche
1. Führen Sie zunächst die Verwendung von CSS-Attributen ein, um das Gesamtlayout zu zentrieren:
Legen Sie hier den übergeordneten Inhalt des Objekts fest, das zentriert werden soll. Wir können uns vorstellen, dass der Inhalt der gesamten Seite aus 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e und 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 besteht. Dann legen wir das CSS des Körpers fest, um das zu erreichen Zentrierungsproblem: Sie können den Inhalt mit text-align:center zentrieren. Der spezifische CSS-Zentrierungscode lautet:
body{text-aligh:center }. Aber auch das wird zu Problemen führen, da Sie die Breite des Layouts nicht festgelegt haben .“, sobald Sie das Float:-Attribut im äußersten CSS-Steuerelement in Ihrem Inhaltslayout festlegen, neigt sich das Layout in die von Ihnen festgelegte Float:-Richtung. Die Lösung besteht darin, das zentrierte CSS-Attribut des Körpers festzulegen Das Layoutobjekt ist auf die Mitte eingestellt und die Breite kann definiert werden. Wenn die Breite der Webseite 700 Pixel beträgt und der äußerste CSS-Stil class="weicheng" ist, sollte die Einstellung wie folgt lauten: ".weicheng{margin:0 auto ; width:700px;} " Das ist es. Dieses Element ist unter IE nützlich. Nach dem Testen kann unter Browsern wie Firefox nur das Festlegen von text-aligh:center; zusätzlich zum übergeordneten Element (Body) das Layout nicht zentrieren. Dann können wir auch Es muss ein „ „margin:0 auto; „Was bedeutet das? Es bedeutet, dass der Abstand zwischen Ober- und Unterseite des Inhalts 0 beträgt und der Abstand zwischen links und rechts automatisch „automatisch“ ist, sodass Sie die Webseite festlegen können Das Layout soll zentriert sein (margin:5px auto hier einstellen; derselbe Effekt hat keinen Einfluss auf das Experiment). Das vollständige Beispiel ist (Sie können den Code kopieren, um eine neue HTML-Datei zu erstellen, um den Effekt anzuzeigen):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的布局居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px;
height:200px; border:1px solid #000000;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，
我宽700px，高为200px,设置了与顶部内容距离为5PX</div>
</body>
</html>CSS-Layout-Zentrierungsbeispielansicht
2. Einführung in die Verwendung von CSS-Attributen um den Hintergrund der Webseite zu zentrieren:
Zentrierung umfasst hier die linke und rechte Zentrierung sowie die obere und untere Zentrierung. Der Zentrierungscode lautet wie folgt:
body{BACKGROUND: #FFF url(http://www.divcss5 .com/img/css-logo.gif) no-repeat center; } // Die Bedeutung dieser Passage besteht darin, den Hintergrund des css-logo.gif-Bildes auf nicht wiederholbar (no-repeat) festzulegen Zentrieren Sie es (Mitte). Die Zentrierung erfolgt links und rechts, und die vertikale Einstellung muss nicht festgelegt werden, sie wird automatisch zentriert.
3. Anleitung zum Zentrieren des Einleitungstexts und des Bildinhalts links, rechts, oben und unten in CSS:
Wir wissen, dass es einfach ist, links und rechts zu zentrieren und einfach Text zu verwenden. align:center; um den Text und den Bildinhalt zu zentrieren, aber wenn wir das Bild vertikal auf eine Höhe von 120 Pixel zentrieren, ist die Bildzentrierung das CSS-Attribut „vertikal-align:middle“, und die Textzentrierung erfordert das Festlegen der Zeilenhöhe Methode zum Zentrieren des Textinhalts. Hier legen wir die Höhe auf 120 Pixel fest. Zeilenhöhe: 120 Pixel. Auf diese Weise können Text und Bild über CSS-Attributstile nach oben, unten, links und rechts zentriert werden.
Der Code zur Zentrierung der gesamten Website lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的完整居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; margin:0 auto;
background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;}
.waicheng {color: #0066CC; margin:5px auto;
width:700px; height:120px; line-height:120px; border:1px solid #000000; }
.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的完整居中实例;
我的布局外层有一个边为1px
<img src="http://www.divcss5.com/img/css-logo.gif" alt="图片内容居中" /></div>
</body>
</html>