Question 238077 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I align another div next to an already centered item

I want to add an item next to a already centered item. I.E. I want Button 1a AND Button 2a to be centered together. And the spinner to be on the right keeping the button in the center.

    <div class="container-2">
      <div class="col-2-button">
        <button class="button">Button 1a</button>
      </div>
      <div class="col-2-spinner">
        <p>my spinner</p>
      </div>
    </div>

    <div class="flex-container">
      <button class="button">Button 2a</button>
    </div>

Icentred button

Tags:

2

Answers


  1. 0

    The simplest solution is to use position:absolute and give up on the spinner being part of the page flow:

    .col-2-spinner p {
  margin: 0;
}

body {
  text-align: center;
}

.container-2>* {
  display: inline-block;
}

.col-2-spinner {
  position: absolute;
}
    <div class="container-2">
  <div class="col-2-button">
    <button class="button">Button 1a</button>
  </div>
  <div class="col-2-spinner">
    <p>my spinner</p>
  </div>
</div>

<div class="flex-container">
  <button class="button">Button 2a</button>
</div>
    Login or Signup to reply.
  2. 0

    This is quite easy with Grid layout:

    .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.button {
  grid-column: 2;
}

p {margin: 0;}
    <div class="container">
  <div class="button">
    <button>Button 1a</button>
  </div>
  <div class="spinner">
    <p>my spinner</p>
  </div>
</div>

<div class="container">
  <button class="button">Button 2a</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search