-1

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

bibble235
  • 788
  • 9
  • 15

2 Answers2

3

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>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • Thanks, not only a good answer but a learning opportunity for me. Never used grid as flexbox met my needs to date. – bibble235 Aug 27 '23 at 10:32
  • Grid is amazing. I recommend looking further into it! – ralph.m Aug 27 '23 at 12:44
  • Just done the leg work and watched David (Dave) Gray (not that one) and it is amazing. Lazy of me not to know. Reminded me of my java days when I knew only one layout Gridbag – bibble235 Aug 27 '23 at 22:06
1

One 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>
scrhartley
  • 676
  • 7