집 > 기사 > 웹 프론트엔드 > css_javascript 팁에서 부동 요소를 수평으로 중앙에 배치하는 방법

css_javascript 팁에서 부동 요소를 수평으로 중앙에 배치하는 방법

WBOY원래의: 2016-05-16 15:46:171400검색

고정 너비의 부동 요소가 아닌 경우 CSS에서 margin:0 auto를 사용하여 가로로 가운데에 배치할 수 있습니다. 가변 너비의 부동 요소의 경우 가로 중심 문제를 해결하는 일반적인 기술도 있습니다. 수평 중심 문제를 해결하는 방법에는 여러 가지가 있습니다. 세 가지 방법을 공유해 보겠습니다.

방법 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%로 이동합니다. 상대 오른쪽 또는 하위 요소가 상대 왼쪽으로 -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 버그를 피할 수도 있습니다. 비유하자면, 부동 요소를 중앙에 배치하는 이 방법은 실제로 부동 요소를 중앙에 배치해야 하는 많은 상황으로 확장될 수 있습니다.

위에서는 세 가지 방법을 통해 CSS에서 플로팅 요소를 수평으로 중앙에 배치하는 방법을 설명합니다. 앞으로도 이 웹사이트에서는 js, jq, css, php, c# 및 기타 프로그래밍 측면에 대한 지식을 계속 업데이트할 예정입니다. , 감사합니다.

성명：

이전 기사：jQuery는 list content_jquery의 동적 로딩 효과를 구현합니다.다음 기사：jQuery는 list content_jquery의 동적 로딩 효과를 구현합니다.

css_javascript 팁에서 부동 요소를 수평으로 중앙에 배치하는 방법

관련 기사