>  기사  >  웹 프론트엔드  >  CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

藏色散人
藏色散人원래의
2020-12-30 09:28:023066검색

CSS 글꼴을 한 줄에 가운데로 설정하는 방법: 먼저 div를 만든 다음 div에 p 태그를 작성하고 "text-align: center;" 속성을 한 줄에 맞추도록 설정합니다.

CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, HTML5&&CSS3 버전.

Css는 글꼴이 한 줄에 중앙에 오도록 설정합니다

1. 먼저 관찰의 편의를 위해 div

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    
</div>

CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

2를 만들고 div에 p 태그를 작성하고 텍스트를 설정합니다. align: center; 속성 단일 행을 중앙에 배치합니다.

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
    .app > p{
        text-align: center;
        overflow: hidden; 
        text-overflow:ellipsis;  
        white-space: nowrap;
    }
</style>
<div class="app">
    <p>Hello World!</p>
</div>

CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

3.span과 같은 인라인 요소인 경우 상위 요소에 text-align: center; 속성을 추가할 수 있습니다.

<style>
    .app{
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    <span>Hello World!</span>
</div>

4. line-height와 상위 요소의 높이는 동일합니다.

<style>
    .app{
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid skyblue;
    }
    .app > span{
        line-height: 100px;
    }
</style>
<div class="app">
    <span>Hello World!</span>
</div>

CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법

추천: "css 비디오 튜토리얼"

위 내용은 CSS 글꼴이 한 줄 중앙에 오도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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