Abhi Pavithran Abhi Pavithran - 3 months ago 9
CSS Question

How to vertically Align the button text to the second line w.r.t label. in an <li>

I need to vertically align the button text to the line with respect to second line(always to second line) of the label if there is a word-break else to the first line of the label text(which is dynamic.)

<ul>

<li>
<div id="label" class="left word-break-on-particular-width">A dynamic text</div>
<div id="value" class="right"><button>button text</button></div>
</li>

<li>
<div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
<div id="value1" class="right"><button>button text</button></div>
</li>

</ul>


output should be like this

Answer

Flexbox can do that:

ul {
  list-style-type: none;
  width: 50%;
  /* for demo */
  margin: auto;
}
li {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
li div {
  padding: 0 1em;
}
.right {
  margin-left: auto;
  flex: 0 0 auto
}
<ul>

  <li>
    <div id="label" class="left word-break-on-particular-width">A dynamic text</div>
    <div id="value" class="right">
      <button>button text</button>
    </div>
  </li>

  <li>
    <div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
    <div id="value1" class="right">
      <button>button text</button>
    </div>
  </li>

</ul>

CSS Tables also

ul {
  list-style-type: none;
  display: table;
  width: 50%;
  margin: auto;
}
li {
  display: table-row;
}
li div {
  border: 1px solid grey;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
}
.right {
  white-space: nowrap;
}
<ul>

  <li>
    <div id="label" class="left word-break-on-particular-width">A dynamic text</div>
    <div id="value" class="right">
      <button>button text</button>
    </div>
  </li>

  <li>
    <div id="label1" class="left word-break-on-particular-width">A dynamic text(width of this will differ as per the text recieved)</div>
    <div id="value1" class="right">
      <button>button text</button>
    </div>
  </li>

</ul>

Comments