How do I center the Border Childs With text content in it?
I want to center my button like :
text1text
text2
Here’s what I tried:
.btn {
margin-bottom: 5rem;
width: fit-content;
border-radius: 2.5px;
border-style: solid;
border-width: 5px;
padding: 5px 15px 5px 15px;
text-align: center;
align-items: center;
align-content: center;
}<h1 class="btn">testestest</h1>
<h1 class="btn">testest</h1>none of the 3 methods worked 🙁
>Solution :
You would need to wrap your h1 tags inside another div element
.btn {
margin-bottom: 5rem;
width: fit-content;
border-radius: 2.5px;
border-style: solid;
border-width: 5px;
padding: 5px 15px 5px 15px;
}
.btn-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}<div class="btn-container">
<h1 class="btn">testestest</h1>
<h1 class="btn">testest</h1>
<div>This is one way to do it.
Good luck.