[CSS 노트 10] CSS 스타일 설정 팁
1. 가로 중심 설정: 인라인 요소
실제 작업에서는 가로 중심을 설정해야 하는 경우가 많습니다. 예를 들어 기사 제목은 일반적으로 화면에 가로로 표시됩니다. 센터.
여기에는 두 가지 상황이 있습니다. 인라인 요소 또는 블록 요소는 고정 너비 블록 요소와 가변 너비 블록 요소로 나뉩니다. 오늘은 먼저 인라인 요소를 가로 중앙에 배치하는 방법을 알아 보겠습니다.
설정된 요소가 텍스트나 그림과 같은 인라인 요소인 경우 text-align:center를 상위 요소로 설정하여 가로 가운데 정렬이 이루어집니다. (상위 요소와 하위 요소: 다음 html 코드와 같이 div는 "부모 컨테이너에 가로로 중앙에 표시하고 싶습니다."라는 텍스트의 상위 요소입니다. 반대로 이 텍스트는 div의 하위 요소입니다.) 다음 코드:
html 코드:
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style> 2. 가로 중심 설정: 고정폭 블록 요소
설정할 요소가 블록 요소인 경우 텍스트를 사용하여- align: center는 작동하지 않습니다. 고정 너비 블록 요소와 가변 너비 블록 요소라는 두 가지 상황도 있습니다.
이 섹션에서는 먼저 고정 너비 블록 요소에 대해 설명하겠습니다. (고정 너비 블록 요소: 블록 요소의 너비는 고정된 값입니다.)
고정 너비와 블록의 두 가지 조건을 충족하는 요소는 "왼쪽 및 오른쪽 여백" 값을 ""로 설정하면 가능합니다. 자동" 중심. div 블록 요소를 가로 중앙에 설정하는 예를 살펴보겠습니다.
html 코드:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>다음과 같이 작성할 수도 있습니다.
margin-left:auto; margin-right:auto;
참고 : "상하 여백" 요소를 마음대로 설정할 수 있습니다.
3. 수평 센터링 개요: 가변 너비 블록 요소의 방법 1
실제 작업에서는 "가변 너비의 블록 모양 요소"에 대해 중심을 설정해야 할 필요성에 직면하게 됩니다. , 웹 페이지 페이징 탐색과 같은 페이징 횟수는 불확실하므로 너비를 설정하여 유연성을 제한할 수 없습니다. (가변폭 블록 요소: 블록 요소의 폭은 고정되어 있지 않습니다.)
가변 폭을 갖는 블록 요소를 센터링하는 방법에는 세 가지가 있습니다. (현재 이 세 가지 방법이 많이 사용됩니다.)
1. 테이블 태그 추가
2. 표시 설정: 인라인 방법: 첫 번째 방법과 유사하게 표시 유형을 인라인 요소로 설정하고 가변 너비 요소의 속성을 설정합니다.
3. 상대 및 왼쪽:50 %: 상대 위치 지정을 사용하여 요소를 왼쪽으로 50% 이동합니다. 즉, 중앙 정렬 목적을 달성합니다.
이 섹션에서는 첫 번째 방법에 대해 설명합니다.
결합하기 위해 방법 1을 선택하는 이유는 무엇입니까? 테이블 태그는 테이블 태그의 길이 적응성을 사용합니다. 즉, 길이를 정의하지 않고 상위 요소 본문의 길이를 기본값으로 사용하지 않습니다. 테이블의 길이는 테이블 태그에 따라 결정됩니다. 그 안의 텍스트 길이에 따라) 고정 너비 블록 요소로 간주할 수 있으며, 고정 너비 블록 모양 여백을 사용하여 가로 중앙에 배치합니다.
1단계: 설정해야 하는 중앙 요소 외부에 테이블 태그(
,2단계: 이 표의 "왼쪽 및 오른쪽 여백 중앙"을 설정합니다(고정 너비 블록 요소와 동일한 방법).
예:
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> 4. 가로 중심 정렬 요약: 변수 width 블록 요소 방법 2
이전 섹션에서 언급한 테이블 태그를 삽입하여 가로로 가변 너비의 블록 요소를 중앙에 배치할 수 있는 것 외에도 이 섹션에서는 이 효과를 얻기 위해 요소의 표시 유형을 For로 변경하는 두 번째 방법을 소개합니다. 인라인 요소의 경우 해당 속성을 사용하여 직접 설정하세요.
두 번째 방법: 블록 수준 요소의 표시 유형을 인라인 유형으로 변경(인라인 요소 표시로 설정)한 다음 text-align:center를 사용하여 센터링 효과를 얻습니다. 다음 예:
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; } 3
</style>첫 번째 방법에 비해 이 방법의 장점은 추가할 필요가 없습니다. 의미 태그는 없지만 몇 가지 문제도 있습니다. 블록 요소의 표시 유형을 인라인으로 변경하여 인라인 요소로 전환하므로 길이 값 설정과 같은 일부 기능이 손실됩니다.
3. 가로 가운데 정렬 요약: 가변 너비 블록 요소에 대한 방법 3
이전 두 섹션에서 언급한 테이블 태그를 삽입하고 요소의 표시 유형을 변경하는 것 외에도 다음을 수행할 수 있습니다. 가변 너비 블록 요소 이 섹션에서는 이 효과를 달성하기 위한 수평 센터링 외에도 부동 및 상대 위치 지정을 설정하여 달성되는 세 번째 방법을 소개합니다.
방법 3: 상위 요소에 대해 float를 설정한 다음 상위 요소에 대해 position:relative 및 left:50%를 설정하고 하위 요소에 대해 position:relative 및 left: -50%를 설정하여 수평 중심 맞추기를 달성합니다. .
이렇게 이해할 수 있습니다. ul의 상위 레이어를 나누는 ul 레이어(즉, 아래 예의 div 레이어)의 상위 레이어 중앙에 이등분선이 있다고 가정합니다. CSS 코드는 ul 레이어의 가장 왼쪽 끝을 ul 레이어의 상위 레이어(div 레이어)의 이등분선과 정렬하는 반면, li 레이어의 CSS 코드는 ul 레이어의 가장 왼쪽 끝(div 레이어의 이등분선이기도 함)에 li 레이어를 정렬하여 li 레이어를 중앙에 배치합니다.
코드는 다음과 같습니다.
<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>이 세 가지 방법은 매우 널리 사용되며 각각 고유한 장점이 있으며 단점은 특정 상황에 따라 사용할 수 있는 방법을 구체적으로 선택하십시오.
六、垂直居中：父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container"> hi,imooc! </div>
css代码：
<style> .container{ height:100px; line-height:100px; background:#999; } </style>七、垂直居中：父元素高度确定的多行文本一
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
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，所以我们不需要显式地设置了。
八、垂直居中：父元素高度确定的多行文本二
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 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而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
九、隐性修改display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute; width:200px; background:#ccc; } </style> 以上就是【CSS笔记十】CSS样式设置小技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7768
15
1644
14
1399
52
1293
25
1234
29
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
