Align div to start at the center of row-CodePudding

My intention is this:

Sadly I cannot figure out how to align this the way I want to, other than with margin. The issue is with the row with button. I want to align the div with id="info" to start at the center of the row (id="row").

This is the current state and the code, below.

<div  id="row">

    <div >
        
    </div>

    <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
        <img src='xy.png' style="max-width: 100%; max-height: 100%;">
    </div>

    <div id="info">

        <div> SAMPLE TEXT </div>
        <div><button>SELECT PICKUP</button></div>


    </div>
</div>

Since I am trying to generate multiple lines like this in a for loop, I do not want to complicate things with if / else statements.

Is there a different way to achieve this, some kind of align option I am not aware of? Or should I just use margin for the rows with buttons?

CodePudding user response：

Here's the code for your question. You can add just a few css for this.

The screenshot of the result:

Check the full code below. I used SVG instead of img since it doesn't work in the current code.

#row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#info {
  position: relative;
}

#info>div:last-child {
  position: absolute;
  width: max-content;
  margin-top: 5px;
}

<div  id="row">

  <div >
  </div>
  <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 50px; width: 50px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g  transform="translate(0,0)" style=""><path d="M256 24.585L51.47 118.989 256 213.394l204.53-94.405zM38.998 133.054v258.353L247 487.415V229.063zm434.004 0L265 229.062v258.353l208.002-96.008z" fill="#fff" fill-opacity="1"></path></g></svg>
  </div>

  <div id="info">
    <div> SAMPLE TEXT </div>
    <div><button>SELECT PICKUP</button></div>
  </div>
</div>

CodePudding user response：

You could use grid. Make a grid as a "card" to insert in a container.

.container {
  width: 500px;
}

.card {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}

#div1 {
  grid-area: 1 / 1 / 3 / 2;
  align-self: center;
  justify-self: center;
}

#div2 {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  justify-self: center;
}

#div3 {
  grid-area: 1 / 3 / 2 / 4;
  align-self: center;
  justify-self: center;
}

#div4 {
  grid-area: 2 / 3 / 3 / 4;
  align-self: center;
  justify-self: center;
}

<div >
  <div >
    <div id="div1">
      <input type="radio" id="radio" value="HTML">
    </div>
    <div id="div2">
      <svg id="logo-84" width="40" height="28" viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M9.98578 4.11462L0 14C1.99734 15.9773 4.27899 17.6437 6.76664 18.9474C7.45424 20.753 8.53203 22.4463 10 23.8995C15.5229 29.3668 24.4772 29.3668 30 23.8995C31.468 22.4463 32.5458 20.753 33.2334 18.9473C35.721 17.6437 38.0027 15.9773 40 14L30.0223 4.12266C30.0149 4.11527 30.0075 4.10788 30 4.1005C24.4772 -1.36683 15.5229 -1.36683 10 4.1005C9.99527 4.10521 9.99052 4.10991 9.98578 4.11462ZM29.0445 20.7309C26.1345 21.7031 23.0797 22.201 20 22.201C16.9203 22.201 13.8656 21.7031 10.9556 20.7309C11.2709 21.145 11.619 21.5424 12 21.9196C16.4183 26.2935 23.5817 26.2935 28 21.9196C28.381 21.5424 28.7292 21.145 29.0445 20.7309ZM12.2051 5.8824C12.9554 6.37311 13.7532 6.79302 14.588 7.13536C16.3038 7.83892 18.1428 8.20104 20 8.20104C21.8572 8.20104 23.6962 7.83892 25.412 7.13536C26.2468 6.79302 27.0446 6.3731 27.795 5.88238C23.4318 1.77253 16.5682 1.77254 12.2051 5.8824Z" fill="#3B4158"></path></svg>
    </div>
    <div id="div3">
      SAMPLE TEXT
    </div>
    <div id="div4">
      <button>SELECT PICKUP</button>
    </div>
  </div>
</div>

Here the grid has 2 rows and 3 cols.

First div is taking the 2 rows and 1rst col. Second div is taking 2 rows and 2 col. 3rd div taking first row on 3rd col. 4th div 2nd row 3rd col.

Each div is align-self and justify-self center, in case you prefer to change positioning on a div. If you want like this, you can align and justify directly in card grid definition.

You can change names, and put divs from id to class if needed.