CSS 스타일 설정
- 高洛峰원래의
- 2016-10-29 11:25:161987검색
1. 가로 센터링 설정
인라인 요소 센터링 설정: 설정된 요소가 텍스트나 그림 등의 인라인 요소인 경우 상위 요소에 text-align:center를 설정하면 가로 센터링이 이루어집니다. 코드 예시는 다음과 같습니다.
HTML代码
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
.txtCenter{
text-align:center;
}
</style>고정 너비 블록 요소의 센터링 설정: 고정 너비와 블록의 두 가지 조건을 충족하는 요소는 "왼쪽 및 오른쪽 여백" 값을 로 설정하여 센터링할 수 있습니다. "자동". 코드 예는 다음과 같습니다.
HTML代码
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>가변 너비 블록 요소의 중심 맞추기:
테이블 태그를 추가하면 길이 적응성을 활용합니다. 테이블 태그 - --즉, 길이가 정의되지 않고 상위 요소 본문의 길이가 기본값으로 지정되지 않습니다(테이블의 길이는 그 안에 있는 텍스트의 길이에 따라 결정됨). 고정 너비 블록 요소를 선택한 다음 고정 너비 블록 중심 여백 방법을 사용하여 가로로 가운데에 배치합니다. 코드 예시는 다음과 같습니다.
HTML代码
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
CSS代码
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>2. 표시 설정: 인라인 방식: 블록 수준 요소 표시를 인라인 유형으로 변경(인라인 요소 표시로 설정)한 후 텍스트 정렬을 사용합니다. 센터링 효과를 달성하기 위해 센터. 코드는 다음과 같습니다:
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>3. position:relative 및 left:50% 설정: float를 상위 요소로 설정한 다음 position:relative 및 left:50%를 상위 요소로 설정합니다. , 하위 요소는 수평 중심을 달성하기 위해 position:relative 및 left: -50%를 설정합니다. 코드는 다음과 같습니다.
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>2. 세로 센터링 설정
상위 요소의 높이가 결정된 한 줄의 텍스트:
세로 센터링 방법 부모 요소의 높이가 결정된 한 줄의 텍스트 이는 부모 요소의 높이와 줄 높이를 일관되게 설정하여 달성됩니다. (height: 요소의 높이, line-height: 이름에서 알 수 있듯이 줄 높이(줄 간격)는 텍스트에서 줄 사이의 기준선 사이의 거리를 나타냅니다.) 코드는 다음과 같습니다.
HTML代码
<div class="container">
hello, world!
</div>
CSS代码
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>상위 요소의 특정 높이를 갖는 여러 줄의 텍스트:
1. 삽입 테이블(tbody, tr, td 포함) 태그를 사용합니다. 수직 정렬: 중간을 설정합니다. CSS에는 수직 정렬이라는 속성이 있습니다. 상위 요소가 이 스타일을 설정하면 모든 인라인 블록 유형 하위 요소에 유용합니다. 코드는 다음과 같습니다:
HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/2. Chrome, Firefox 및 IE8 이상 브라우저에서는 블록 수준 요소 표시를 테이블 셀(테이블 셀 표시로 설정)로 설정하고 활성화할 수 있습니다. 수직 정렬 속성이 있지만 IE6과 7에서는 이 스타일을 지원하지 않으며 호환성이 상대적으로 좋지 않습니다. 코드는 다음과 같습니다.
HTML代码
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
CSS代码
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>이 방법의 장점은 불필요한 태그를 추가할 필요가 없다는 점이지만, 호환성도 그다지 좋지 않다는 단점도 있습니다. IE6 및 7과 호환되며 디스플레이가 이런 방식으로 수정되어 블록이 테이블 셀이 되어 원래 블록 요소의 특성이 파괴되었습니다.
3. 암시적으로 표시 유형 변경
요소인 경우(display:none을 제외하고 이전 요소 유형에 관계 없음) 다음 두 문장 중 하나를 설정합니다.
1 . position : 절대
2. float : left 또는 float:right
요소의 표시 유형이 자동으로 display:inline-block(블록 요소)으로 변경됩니다. , 물론 요소의 너비와 높이를 설정할 수 있으며 기본 너비는 상위 요소를 차지하지 않습니다. 코드는 다음과 같습니다.
HTML代码
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>