CSS 고급 CSS 기술 공유-CSS 튜토리얼-php.cn

CSS 고급 CSS 기술 공유

高洛峰

풀어 주다： 2017-03-23 11:28:42

원래의

1279명이 탐색했습니다.

가로 중심은 어떻게 설정하나요?

두 가지 상황이 있습니다: 인라인 요소와 블록 수준 요소

1. 인라인 요소(그림, 텍스트 등)

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

로그인 후 복사

2. 블록 수준 요소

블록 레벨 요소의 가로 중심 배치는 고정 너비 블록 요소와 비고정 너비 블록 요소의 두 가지 유형으로 구분됩니다.

고정 너비 블록 요소(즉, , 블록 요소의 너비 값은 고정 값입니다. ):

이는 다음과 같이 블록 수준 요소의 왼쪽 및 오른쪽 여백을 자동으로 설정하여 달성할 수 있습니다.

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

로그인 후 복사

가변 너비 블록 요소(즉, 웹 페이지의 페이징 탐색과 같이 너비 너비가 불확실함)

가변 너비 요소를 수평으로 가운데 맞추는 데 일반적으로 사용되는 세 가지 방법이 있습니다.

첫 번째 방법: 테이블 태그 사용

테이블 태그의 길이 적응성을 사용합니다. 즉, 길이를 정의해도 기본적으로 상위 요소 본문의 길이가 적용되지 않습니다(테이블의 길이는 그 안에 있는 텍스트의 길이에 따라 결정됨), 고정폭 블록 요소로 간주할 수 있으며, 고정폭 블록 모양의 중앙 여백 방식을 사용하여 수평으로 만듭니다. 센터링

Step 1 : 중앙에 배치해야 하는 요소 외부에 테이블 태그(, , 포함)를 추가합니다.

2단계: 이 표의 "왼쪽 및 오른쪽 여백 중앙"을 설정합니다(고정 너비 블록 요소와 동일한 방법).

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

로그인 후 복사

두 번째 방법: 블록 수준 요소의 표시를 인라인 유형으로 변경한 다음(인라인 요소를 표시하도록 설정), text-align:center를 사용하여 센터링 효과를 얻습니다. 다음 예는

   .container{
   text-align:center;
   }
   .container ul{
   display:inine;
   list-style:none;
   padding:0;
   margin:0;
   }
   .container li{
   display:inline;
   margin-right:8px;
   }

로그인 후 복사

첫 번째 방법에 비해 의미 없는 태그(테이블)를 추가할 필요가 없습니다. 단, li는 인라인 요소로 간주되므로 높이, 너비 등의 속성을 설정할 수 없습니다.

세 번째 방법: float를 상위 요소로 설정한 다음 position:relative 및 left:50%를 상위 요소로 설정하고 position:relative 및 left: -50%를 설정하여 수평 센터링을 달성합니다. 자식 요소.

   .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;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

로그인 후 복사

2. 수직 센터링은 어떻게 설정하나요?

은 두 가지 상황, 즉 부모 요소의 높이가 결정된 한 줄의 텍스트와 부모 요소의 높이가 결정된 여러 줄의 텍스트로 구분됩니다.

한 줄 텍스트: 줄 높이를 높이와 일치하도록 설정하여 세로 가운데 맞춤이 이루어집니다.

계산된 줄 높이와 글꼴 값의 차이 -size는 "줄 간격"이 됩니다. 그것을 두 부분으로 나누어 텍스트 줄의 위쪽과 아래쪽에 추가합니다.

동일한 텍스트 줄 높이와 블록 높이에는 단점이 있습니다. 텍스트 내용의 길이가 블록의 너비보다 길면 내용이 블록에서 떨어집니다.

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

로그인 후 복사

CSS 고급 CSS 기술 공유

그러나 이 방법에는 단점이 있습니다. 텍스트의 길이가 블록의 너비보다 길면 내용이 블록에서 빠져 나옵니다.

여러 줄 텍스트:

두 가지 방법이 있습니다:

table 태그를 사용하고 Vertical-align:middle을 사용합니다. -align set by default :middle

따라서 수동으로 설정할 필요가 없습니다.

table td{
height:500px;
background:#purple;
}
<table>
    <tbody>
    <tr><td>
    <div>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    </div>
    </tr></tr>
    </tbody>
</table>

로그인 후 복사

CSS 고급 CSS 기술 공유

마지막 트릭

암시적으로 변경됩니다. 다음 두 문 중 하나를 설정하는 경우:

float:right 또는 float:right

position:absolute

요소는 자동으로 display:inline-block으로 변경됩니다. 이때

<style type="text/css">
.container a{
    position:absolute;
    width:100px;
    height:50px;
    background:purple;
}
</style>
<body>
    <div class="container">
      <a href="#">
          I am CEO,you son of bitch.
      </a>
    </div>
</body>

로그인 후 복사

CSS 고급 CSS 기술 공유