Rumah > Artikel > hujung hadapan web > Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css_javascript

Bagaimana untuk memusatkan elemen terapung secara mendatar dalam petua css_javascript

WBOYasal: 2016-05-16 15:46:171371semak imbas

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>

2. Bahagian CSS:

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

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>

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery melaksanakan kesan pemuatan dinamik senarai content_jqueryArtikel seterusnya：jQuery melaksanakan kesan pemuatan dinamik senarai content_jquery

Artikel berkaitan

Lihat lagi