css_javascript ヒントでフローティング要素を水平方向に中央揃えする方法-jsチュートリアル-php.cn

css_javascript ヒントでフローティング要素を水平方向に中央揃えする方法

WBOY

リリース： 2016-05-16 15:46:17

オリジナル

1415 人が閲覧しました

固定幅の非浮動要素の場合、CSS で margin:0 auto を使用して水平方向に中央揃えにすることができます。また、可変幅の浮動要素の場合、水平方向の中央揃えの問題を解決する一般的な手法もあります。水平方向のセンタリングの問題を解決するにはさまざまな方法があります。お役に立てれば幸いです。3 つの方法を紹介します。

方法 1:

1. HTML 部分:

<div class="box">
 <p>我是浮动的</p>
 <p>我也是居中的</p>
</div>

ログイン後にコピー

2. CSS 部分:

.box{
 float:left;
 position:relative;
 left:50%;
}
p{
 float:left;
 position:relative;
 right:50%;
}

ログイン後にコピー

非常に単純に思えますよね。親要素と子要素が同時に左に移動し、次に親要素が相対的に左に 50% 移動し、次に子要素が 50% に移動します。相対的に右に移動するか、子要素を相対的に左に % 移動するだけで十分です。とてもシンプルで、とても魔法のようです。

方法 2:

HTML コード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
 .clearfix { zoom:1; }
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
 .inwrap{ float:left; position:relative; left:50%;}
 .page { float:left; position:relative; left:-50%; }
 .page li { float:left;margin:0 5px; }
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<div class="wrap clearfix">
 <div class="inwrap">
 <ul class="page">
  <li> <a href="#">上一页</a> </li>
  <li> <a href="#">1</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">5</a> </li>
  <li> <a href="#">6</a> </li>
  <li> <a href="#">下一页</a> </li>
 </ul>
 </div>
</div>
</body>
</html>

ログイン後にコピー

親要素と子要素が同時に左に移動し、次に親要素が相対的に左に 50% 移動し、次に子要素が相対的に左に -50% 移動します。

方法 3:

HTML コード

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>页面元素的水平居中</title> 
<style type="text/css"> 
 * { margin:0; padding:0; list-style:none; font-size:14px; } 
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; } 
 .clearfix { zoom:1; } 
 a{ text-decoration:none;} 
 h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;} 
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; } 
 .inwrap{ float:left; position:relative; left:50%;} 
 .page { float:left; position:relative; left:-50%; } 
 .page li { float:left;margin:0 5px; } 
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;} 
</style> 
</head> 
<body> 
<h1>页面元素的水平居中</h1> 
<h2>浮动方式：</h2> 
<div class="wrap clearfix"> 
 <div class="inwrap"> 
 <ul class="page"> 
  <li> <a href="#">上一页</a> </li> 
  <li> <a href="#">1</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">4</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">4</a> </li> 
  <li> <a href="#">5</a> </li> 
  <li> <a href="#">6</a> </li> 
  <li> <a href="#">下一页</a> </li> 
 </ul> 
 </div> 
</div> 
</body> 
</html>

ログイン後にコピー

ここでは、複数のレイヤーで left:-50% を設定することもできます。これはより合理的であり、不要な IE バグも回避できます。類推すると、float 要素を中央に配置するこの方法は、実際に float 要素を中央に配置する必要がある多くの状況に拡張できます。

上記では、CSS でフローティング要素を水平方向に中央揃えする方法を 3 つの方法で説明しました。今後も、この Web サイトでは、js、jq、css、php、c# およびその他のプログラミングに関する知識を更新していきます。ご注目ください。、ありがとう。