How do I center 2 buttons?

How do I center the Border Childs With text content in it?

I want to center my button like :

   text1text
     text2

Picture Captured Problem

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.

Leave a Reply