CSS 스타일 설정-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 스타일 설정

高洛峰

Oct 29, 2016 am 11:25 AM

css

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>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.