How to center floating elements horizontally in css_javascript tips-JS Tutorial-php.cn

How to center floating elements horizontally in css_javascript tips

WBOY

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

Original

1410 people have browsed it

For fixed-width non-floating elements, we can use margin:0 auto in CSS to horizontally center them. For floating elements with variable widths, we also have a common technique to solve the horizontal centering problem. There are many ways to solve the horizontal centering problem. Let’s share three methods with you. I hope it can help you.

Method 1:

1. HTML part:

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

Copy after login

2. CSS part:

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

Copy after login

It seems very simple, right? The parent element and the child element float to the left at the same time, then the parent element moves 50% to the relative left, and then the child element moves 50% to the relative right, or the child element moves -50 to the relative left. % is enough. So simple and so magical.

Method 2:

HTML code

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

Copy after login

The parent element and the child element float to the left at the same time, then the parent element moves 50% to the relative left, and then the child element moves -50% to the relative left.

Method 3:

html code

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

Copy after login

Here you can also set left:-50% in multiple layers, which is more reasonable and can also avoid some unnecessary IE BUGs. By analogy, this method of centering float elements can actually be extended to many situations where floating elements need to be centered.

The above explains how to center floating elements horizontally in CSS through three methods. In the future, this website will continue to update knowledge about js, jq, css, php, c# and other programming aspects. Please pay attention to this website, thank you.