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

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

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

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

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

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

</div>

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>

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