Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css

Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css_javascript

WBOY

Lepaskan： 2016-05-16 15:46:17

asal

1376 orang telah melayarinya

Untuk elemen tidak terapung lebar tetap, kami boleh menggunakan margin:0 auto dalam CSS untuk melintang memusatkannya Untuk elemen terapung dengan lebar berubah, kami juga mempunyai teknik biasa untuk menyelesaikan masalah pemusatan mendatar. Terdapat banyak cara untuk menyelesaikan masalah pemusatan mendatar Mari kongsikan tiga kaedah dengan anda.

Kaedah 1:

1. Bahagian HTML:

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

Salin selepas log masuk

2. Bahagian CSS:

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

Salin selepas log masuk

Nampaknya sangat mudah, bukan? kanan relatif, atau elemen anak bergerak -50 ke kiri relatif % sudah memadai. Begitu mudah dan sangat ajaib.

Kaedah 2:

Kod 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>

Salin selepas log masuk

Elemen induk dan elemen anak terapung ke kiri pada masa yang sama, kemudian elemen induk bergerak 50% ke kiri relatif, dan kemudian elemen anak bergerak -50% ke kiri relatif.

Kaedah 3:

kod 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>

Salin selepas log masuk

Di sini anda juga boleh menetapkan kiri:-50% dalam berbilang lapisan, yang lebih munasabah dan juga boleh mengelakkan beberapa IE BUG yang tidak perlu. Secara analogi, kaedah memusatkan elemen apungan ini sebenarnya boleh diperluaskan kepada banyak situasi di mana elemen terapung perlu dipusatkan.

Di atas menerangkan cara memusatkan elemen terapung secara mendatar dalam CSS melalui tiga kaedah Pada masa hadapan, laman web ini akan terus mengemas kini pengetahuan tentang js, jq, css, php, c# dan aspek pengaturcaraan yang lain , terima kasih.