Question 248524 in Html Question posted in
Some basic documentation can be found here.

Html – 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 🙁

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Just set your left and right margins to auto:

    .btn {
  margin: auto auto 5rem auto;
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search