stackjlei stackjlei - 2 months ago 10
CSS Question

center middle li of evenly spread li in a ul

I have a jsfiddle here of my issue. I want to evenly distribute an unknown number of

li
s inside a ul. But as you can see from the fiddle, the middle li is not directly under the the header, so it's not correctly centered. Also if you inspect each of the
li
s, they have different widths.

How do I fix it so that the middle
li
will always be in the middle, so as to align with the header?

Answer

Method # 01:

Add table-layout: fixed in styles of .strweak-list.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.strweak-header {
  text-align: center;
}
.strweak-list {
  table-layout: fixed;
  display: table;
  width: 100%;
  list-style: none;
}
.cell {
  display: table-cell;
  text-align: center;
}
<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
  <li class="cell">water</li>
  <li class="cell">ghost</li>
  <li class="cell">ground</li>
</ul>

Method # 02:

You can use css FlexBox as well:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ader {
  text-align: center;
}
.strweak-header {
  text-align: center;
}
.strweak-list {
  text-align: center;
  list-style: none;
  display: flex;
}

.strweak-list li {
  flex-basis: 33.33%;
}
<h5 class='strweak-header'>strongAgainst</h5>
<ul class="strweak-list">
  <li>water</li>
  <li>ghost</li>
  <li>ground</li>
</ul>