Place one item in center, one at the end

Question

I have a css grid with 3 columns. Each column contains a title and a checkbox. I would like to have the title at the 'true' center of the column, the checkbox at the end of the column. However, the width of the columns might change so I can't statically add a margin to the checkbox.

I have this:

I want this:

I tried to set the checkbox position: absolute so the text can easily be centered, since the width of the checkbox is ignored. However this would require me to get the width of the column with javascript and programmatically set the margin of the checkbox so it always appears at the end.

Is there a better/css-only way to achieve this?

Minimal example:

<div className="grid grid-cols-3">
  <div>
    <span>Plannable</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Archive</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Export</span>
    <input type="checkbox" />
  </div>
</div>

Please show your code. Otherwise it is very unlikely, anyone can/will help you. — yunzen, Feb 22 '23 at 12:12

score 1 · Answer 1 · answered Feb 22 '23 at 12:28

A possible way is to apply float: right to the input elements and text-align: center to their parent elements. This also requires margin: 0 for the inputs (at least for top an bottom margins) to avoid their overlapping into the subsequent line:

.grid input {
  float: right;
  margin: 0;
}

.grid>div {
  text-align: center;
}

<div class="grid grid-cols-3">
  <div>
    <span>Plannable</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Archive</span>
    <input type="checkbox" />
  </div>

  <div>
    <span>Export</span>
    <input type="checkbox" />
  </div>
</div>

Diego D · Accepted Answer · 2023-02-22T12:57:57.817

1

The whole scenario isn't very clear because you shared a very basic html not strictly matching the picture shown. Plus there's no reference to what are the styles engaged (probably tailwind).

To center the span you can set its container as display: flex and setting its position: relative will allow you to have its checkbox absolute positioned to its far right.

This is an example:

.grid{
  display: grid;
}

.grid-cols-3{
  grid-template-columns: 1fr 1fr 1fr;  
}

.grid > div {
  border: solid 1px;
  background: lightgray;
  
  /*centering content both horizontally and vertically*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*position the checkbox at the far right of its container*/
.grid > div input {
  position: absolute;
  right: 0;
}

<div class="grid grid-cols-3">
   <div>
      <span>Plannable</span>
      <input type="checkbox"/>
   </div>

   <div>
      <span>Archive</span>
      <input type="checkbox"/>
   </div>

   <div>
      <span>Export</span>
      <input type="checkbox"/>
   </div>
</div>

edited Feb 22 '23 at 12:57

answered Feb 22 '23 at 12:32

Diego D

6,156
2
17
30

What I want is the text to be at the _true_ center of the div. This way, the text will be at the center of the remaining widths, e.g. width of the div minus width of the checkbox. Deleting the checkbox will result in the span to slighly move to the right since some space was freed. – octavio Feb 22 '23 at 12:42
1

I corrected my code so that each container uses `display: flex` for centering its span child while the checkbox gets positioned absolute on its far right – Diego D Feb 22 '23 at 12:58
This is exactly what I wanted. The ```position: relative``` is doing the magic, didn't know it had this effect on the child with ```position: absolute```. Thanks! – octavio Feb 22 '23 at 13:18
1

I may have exagerated using display flex there because actually text-align was more than enough to achieve the same result. Yes as you pointed out, the `position: relative` sets the reference frame for its children when positioned absolute. Glad it helped – Diego D Feb 22 '23 at 13:20

score -2 · Answer 3 · answered Feb 22 '23 at 12:25

You could try using Bootstrap 5 to do:

<div class="row">
  <div class="col-sm-4">
    <div class="col-sm-11">
      Planable
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="col-sm-11">
      Archieve
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
  <div class="col-sm-4">
    <div class="col-sm-11">
      Export
    </div>
    <div class="col-sm-1">
      <input type="checkbox" />
    </div>
  </div>
</div>

That's mainly the concept you could use to get that checkbox to really be placed at the end without any problems. If you need the B5 CDN files, here they are:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

that's on the OP code is probably tailwind and not bootstrap. Anyway I suggest you have a working snippet already holding the expected result to clear any doubt. Right now shows something very far from what asked — Diego D, Feb 22 '23 at 12:26

Place one item in center, one at the end

3 Answers3