In an unordered list how can I align the text to the centre in the second column only?

Viewed 47

In the example below, Age & 51 should be centered, the remainder aligned left.

.munitionsvictims {
  list-style-type: none; /* 1841 census pages*/
  display: table;
  margin: 0 auto;
  padding: 0;
}

.munitionsvictims li {
  display: table-row;
  text-align: left;
  padding: 0;
}

.munitionsvictims p {
  display: table-cell;
  text-align: left;
  padding: 3px 0;
}

.munitionsvictims p + p {
  padding-left: 5px;
}
<ul class="munitionsvictims">
  <li>
    <p>Name</p>
    <p>Age</p>
    <p>Address</p>
    <p>Comment</p>
    <p></p>
    <p></p>
  </li>
  <li>
    <p>Thomas Allen</p>
    <p>51</p>
    <p>Charles Street Ashton Under Lyne</p>
    <p>Labourer at Works</p>
    <p></p>
    <p></p>
  </li>

  <li></li>
</ul>

1 Answers

You can achieve this by using :nth-child

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.

check out this fiddle for your case.

read more about :nth-child here.

Related