Heim > Artikel > Web-Frontend > Wie stelle ich das Float-Center in CSS ein?
Wie stelle ich das Float-Center in CSS ein?
- 不言Original
- 2018-10-30 14:05:2326211Durchsuche
Im float-Attribut von CSS schwebt float:right nach rechts und float:left nach links, aber das zentrierte Attribut ist nicht festgelegt. Was sollen wir also tun, wenn wir das float-Attribut zentrieren möchten? In diesem Artikel erfahren Sie, wie Sie das Float-Attribut in CSS zentrieren.
Bei der Erstellung von Navigationsleisten verwenden wir häufig die schwebende Zentrierung. Jetzt werden wir die schwebende Zentrierung von Navigationsleisten verwenden, um Ihnen die Methode der schwebenden Zentrierung in CSS vorzustellen. (Verwandte Empfehlungen: Wie verwende ich das Float-Attribut in CSS?)
So zentrieren Sie Float in CSS: Verwenden Sie display:inline-block und float:left
Sehen wir uns den spezifischen Beispielcode für die Float-Zentrierung an:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
text-align:center;
}
li {
float:left;
font-size:12px;
}
a {
float:left;
border:1px solid #000;
padding:5px 10px;
text-decoration:none;
color:#000;
}
ul {
display:inline-block;
*display:inline;
zoom:1;
}
</style>
</head>
<body>
<ul>
<li><a href="#nogo">首页</a></li>
<li><a href="#nogo">视频</a></li>
<li><a href="#nogo">文章</a></li>
<li><a href="#nogo">登录</a></li>
<li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>Die Wirkung der Float-Zentrierung ist wie folgt:
In Bezug auf den obigen Code sehen wir ein *display:inline;, das eigentlich eine CSS-Hack-Schreibmethode ist (falls Sie die CSS-Hack-Schreibmethode nicht kennen). , Sie können es selbst auf Baidu suchen) *{margin: 0;padding: 0;} ist in der Vergangenheit ein üblicher „Reset“-Stil, was bedeutet, dass alle Elemente auf der Webseite eng miteinander verbunden sind, weil sie unterschiedlich sind Browser erzeugen unterschiedliche Standardelementstile, daher *{ margin: 0; padding: 0;} Der Hauptzweck besteht darin, Ihnen beim Zurücksetzen der Standardstile verschiedener Browser zu helfen, damit die Ergebnisse verschiedener Browser bei der Anzeige von Webseiten nicht zu unterschiedlich sind .
Nachdem Sie die oben genannten Methoden gelesen haben, denken Sie möglicherweise manchmal nicht daran, CSS-Hack zum Schreiben zu verwenden, und die Kompatibilität ist nicht gut
Werfen wir also einen Blick auf die Implementierungsmethode ohne *display :inline;
Codebeispiel zum Festlegen der Float-Zentrierung in CSS (ohne Verwendung von *display:inline;):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.xlk-nav {
width: 100%;
height: 40px;
text-align: center;
background-color: lightblue;
}
.xlk-menu {
height: 100%;
float: left;
line-height: 40px;
padding: 0 20px;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="xlk-nav">
<div style="display: inline-block;">
<div class="xlk-menu">首页</div>
<div class="xlk-menu">视频</div>
<div class="xlk-menu">文章</div>
<div class="xlk-menu">登录</div>
<div class="xlk-menu">留言</div>
</div>
</div>
</body>
</html>Der Zentrierungseffekt ist wie folgt:
Das obige ist der detaillierte Inhalt vonWie stelle ich das Float-Center in CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!