HTML CSS 테두리 모양을 변경하는 방법

Question

나는 웹 사이트를 디자인하고 있으며 메인 제목에 대해 "완전한 응용 프로그램"이라고 말하고 싶습니다.

이

내가 내 국경 그러나

#home-banner h1 { 
    border-width: 5px; 
    border-style: solid; 
    text-align:center; 
} 

을 위해 사용하고있는 코드, 이것은이 결과 제공 : 다음 너비를 변경하려고

를하지만 나에게이 결과 주었다

를

#home-banner h1 { 
    border-width: 5px; 
    border-style: solid; 
    width: 500px; 
    text-align:center; 
} 

,

페이지 가운데에 텍스트가있는 테두리가 깔끔합니다. 이것이 가능한가?

Answer 1

width을 지정하지 않으려면 display: table을 사용하십시오.

폭 (500 픽셀), 당신의 코드에 margin: auto;를 추가 고정되어있는 경우

#home-banner h1 { 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    display: table; 
 
    margin: auto; 
 
    text-align:center; 
 
    padding: 0 10px; 
 
}

<div id="home-banner"> 
 
    <h1> 
 
    Heading 1 
 
    </h1> 
 
</div>

.

#home-banner h1 { 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    width: 200px; 
 
    margin: auto; 
 
    text-align:center; 
 
    padding: 0 10px; 
 
}

<div id="home-banner"> 
 
    <h1> 
 
    Heading 1 
 
    </h1> 
 
</div>