CSS 처리의 수평 중심화에 대한 간략한 논의
- 高洛峰원래의
- 2017-03-02 15:44:051343검색
다음 편집자는 CSS 처리의 수평 중심화 문제에 대해 간략하게 논의할 것입니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 와서 편집기와 함께 살펴보세요. 모두 행복한 게임이 되시길 바랍니다
1. 가로 중심 설정 - 인라인 요소
1개 설정 text-align:center through 상위 요소 ; 상위 요소의 내용을 중앙에 배치합니다
2. 가로 중심 설정 - 고정 너비 블록 요소
블록 요소의 너비는 고정됩니다. 값, ""왼쪽 및 오른쪽 여백" 값을 "자동"으로 설정하면 가운데 맞춤이 이루어집니다.
예:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
p{
width: 200px;/*固定的宽度*/
margin: 20px auto;/*左右margin设置为auto*/
border: 1px solid red;
}
</style>
</head>
<body>
<p>我是定宽块状元素，我要水平居中显示。</p>
</body>
</html>
3. 가로 가운데 맞춤 설정 - 가변 너비 블록 요소
방법 1. 테이블 태그 추가
예:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:0 auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>
<p class="wrap">
我要水平居中
</p>
</td></tr>
</tbody>
</table>
</body>
</html>
방법 2. 첫 번째 방법과 유사하게 display:inline 방법을 설정하고, 디스플레이 유형을 inline으로 설정합니다. 요소 및 가변 너비 요소 수행 속성 설정
예:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<body>
<p class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</p>
</body>
</html>
방법 3. 위치 설정:상대적 왼쪽:50% 상대 위치 지정 방법을 사용하려면 요소를 왼쪽으로 50% 오프셋합니다. 즉, 중앙 정렬 목적을 달성하기 위해
예:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
/*下面是代码任务区*/
.wrap{
clear:both;
float:left;
position:relative;
left:50%
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
</style>
</head>
<body>
<!--下面是代码任务区-->
<p class="wrap">
<p class="wrap-center">我们来学习一下这种方法。</p>
</p>
</body>
</html>
위 글은 CSS의 수평 중심화에 대해 간략하게 이야기하고 있습니다. 질문은 편집자가 공유한 모든 내용이 여러분에게 참고가 되기를 바라며, 또한 모든 분들이 PHP 중국어 웹사이트를 지지해 주시길 바랍니다.
CSS 처리 수준 센터링에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.