I want to underline my element finitely while keeping it in center of the page using text-align: center. However, using border-bottom(for underline) and text-align: center at the same time, the underline goes on till the end of the page. Is there any other way I can achieve this? Hope you understand my issue. Thanks in advance.
h1 {
text-align: center;
margin: 5px;
font-family: "Playfair Display", serif;
color: #353935;
border-bottom: 4px double black;<h1>Heading Text</h1>Kalpana Chawla is the content of my element. As you can see, the underline starts well before 'K' and ends afar from 'a'. I want the underline to start just from K' and end at 'a' while keeping the heading in the center.
You could make the heading inline-block and center it in a container element.
h1 {
display: inline-block;
margin: 5px;
font-family: "Playfair Display", serif;
color: #353935;
border-bottom: 4px double black;
}
.text-center {
text-align: center;
}<div class="text-center">
<h1>Heading Text</h1>
</div>i hope this is you are looking for,
use text-decoration: underline
h1 {
text-align: center;
margin: 5px;
font-family: "Playfair Display", serif;
color: #353935;
text-decoration: underline double;
}<h1>Heading Text</h1>