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を使用してください。

#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>

幅が固定されている場合は（500pxなど）、ちょうどあなたのコードにmargin: auto;を追加します。

#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>