CODEWITHSUNDEEP
htmlcss
Nate
Nate

Reputation: 23

Vertically aligning part of content within list items

I am trying to vertically align only part of the content in my list items.

Here is a link to the screenshot.

The "Current" picture is my progress so far, and the "Solution picture is what I am trying to achieve"

If you take a close look at the list items you'll notice that in the "Solution", part of the list items is vertically aligned.

Could someone please explain how I would be able to do this?

Here is my CSS

#middleText {
  float: right;
}

Here is my HTML

    <ul>
      <li><strong>Distance</strong> <span id="middleText">40 miles</span></li>
      <li><strong>Elevation Gain</strong> <span id="middleText">10,779 feet</span></li>
      <li><strong>Permit Required</strong> <span id="middleText">Yes</span></li>
      <li><strong>Difficulty Rating</strong><span id="middleText"> 4 (strenuous)</span></li>
   </ul>

Upvotes: 0

Views: 46

Answers (2)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You can try with grid:

ul {
  display: grid;
  justify-content: start;
}

li {
  display: inline-grid;
  grid-template-columns: auto repeat(2, 1fr);
  column-gap: 1em;
  align-items: center;
}
<ul>
  <li>&#9900;<strong>Distance</strong> <span id="middleText">40 miles</span></li>
  <li>&#9900;<strong>Elevation Gain</strong> <span id="middleText">10,779 feet</span></li>
  <li>&#9900;<strong>Permit Required</strong> <span id="middleText">Yes</span></li>
  <li>&#9900;<strong>Difficulty Rating</strong><span id="middleText"> 4 (strenuous)</span></li>
</ul>

Upvotes: 1

saibbyweb
saibbyweb

Reputation: 3244

You can use a HTML table without its border to achieve the "solution".

<table border="0">
<tr>
<td> Distance </td>
<td> 40 miles </td></tr>
<tr>
<td>Elevation Gain </td>
<td>10,779 feet </td></tr>
<tr>
<td> Permit Required</td>
<td> Yes </td></tr>
<tr>
<td> Difficulty Rating</td>
<td> 4(s..) </td></tr>
</table>

Use CSS accordingly to match the styles.

Upvotes: 1

Related Questions