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

Html – How do I make buttons with titles above to be side-by-side and aligned in the center? (I just started learning couple of days ago)

Here’s I got so far: (https://phpout.com/wp-content/uploads/2024/03/nAkhB.png)

Here’s my HTML:

 <h2 class="section-title">BUTTONS</h2>
        <div class="buttons">
         
            <div class="button-default">
                <small class="btn-label">Default</small>
                <button>Primary Button</button>
                <button>Secondary Button</button>
            </div>
            
            <div class="button-hovered">
                <small class="btn-label">Hovered</small>
                <button>Primary Button</button>
                <button>Secondary Button</button>
            </div>
        </div>

I want it to look like this: (https://phpout.com/wp-content/uploads/2024/03/BTD0u.png)

Tags:

2

Answers


  1. 0

    You can use a table like this:

    <h2 class="section-title">BUTTONS</h2>


        
       
<table>
  <tr>
    <td><small class="btn-label">Default</small></td>
    <td><small class="btn-label">Hovered</small></td>
  </tr>
  <tr>
    <td><button>Primary Button</button></td>
    <td><button>Primary Button</button></td>
  </tr>
  <tr>
    <td>                <button>Secondary Button</button>
</td>
    <td>                <button>Secondary Button</button>
</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Add the following css:

    .buttons {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    Also, update your HTML to be like this.

    <div class="button-container button-default">
   <small class="btn-label">Default</small>
   <button>Primary Button</button>
   <button>Secondary Button</button>
</div>
            
<div class="button-container button-hovered">
   <small class="btn-label">Hovered</small>
   <button>Primary Button</button>
   <button>Secondary Button</button>
</div>

    This will achieve the side-by-side positioning

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search