ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでフロートの中心を設定するにはどうすればよいですか?
CSSでフロートの中心を設定するにはどうすればよいですか?
- 不言オリジナル
- 2018-10-30 14:05:2326256ブラウズ
CSSのfloat属性でfloat:rightは右に、float:leftは左に浮動しますが、centered属性が設定されていないので、float属性を中央に配置したい場合はどうすればよいでしょうか。この記事では、CSS で float 属性を中央揃えにする方法を紹介します。
ナビゲーション バーを作成するときにフローティング センタリングをよく使用します。以下では、ナビゲーション バーのフローティング センタリングを使用して、CSS でのフロート センタリングの方法を紹介します。 (関連する推奨事項: css の float 属性を使用する方法?)
CSS で float を中央に配置する方法: Use display:inline-block と float:left
具体的な float センタリングのコード例を見てみましょう:
<!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>float センタリングの効果は次のとおりです:
上記のコードに関しては、*display:inline; が表示されますが、これは実際には CSS ハックの記述方法です (CSS ハックの記述方法を知らない場合は、 、Baidu で自分で検索できます) *{margin: 0;padding: 0;} は過去に一般的な「リセット」スタイルであり、Web ページ内のすべての要素が互いに密接に関連付けられていることを意味するためです。ブラウザによって異なるデフォルトの要素スタイルが生成されるため、 *{ margin: 0; padding: 0;} 主な目的は、さまざまなブラウザのデフォルト スタイルをリセットして、Web ページを表示するさまざまなブラウザの結果が大きく変わらないようにすることです。 。
上記の方法を読んだ後、CSS ハックを使って書くことを思いつかず、互換性も悪い場合があるかもしれません。
そこで、*display を使用しない実装方法を見てみましょう:inline;
CSS で float のセンタリング コード例を設定する方法 (*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>センタリングの効果は次のとおりです:
以上がCSSでフロートの中心を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。