pinhead pinhead - 6 months ago 11
HTML Question

Centering inline-block unordered lists results in second list forced to bottom

I am attempting to center two unordered lists inside a

div
. To do this, I am using this basic strategy, the crux of which is giving the parent
div
a
text-align: center
property and then making the child
ul
s
inline-block
s:



.area {
text-align: center;
border: 2px dashed red;
border-radius: 5px;
padding: 20px;
width: 75px;
}
.list {
list-style-type: none;
padding: 0;
display: inline-block
}
.list li {
border: 1px solid pink;
margin-bottom: 3px;
padding: 5px;
}

<div class="area">
<ul class="list">
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
<li>sup</li>
</ul>
<ul class="list">
<li>hi</li>
<li>hi</li>
</ul>
</div>





However, the two list items in the second
ul
are positioned at the bottom instead of beginning at the top.

Floating seems to fix this particular issue, but then it seems like I have to do a clearfix to the parent
div
in order for it to match the
height
of the child
ul
s and, in addition, my two
ul
s are no longer nicely centered.

Is there a way to get that second
ul
in line with the first one?

Answer

just set vertical-align:top in .list because an element set inline-block by default is vertical-align:baseline

.area {
  text-align: center;
  border: 2px dashed red;
  border-radius: 5px;
  padding: 20px;
  width: 75px;
}
.list {
  list-style-type: none;
  padding: 0;
  display: inline-block;
  vertical-align: top
}
.list li {
  border: 1px solid pink;
  margin-bottom: 3px;
  padding: 5px;
}
<div class="area">
  <ul class="list">
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
  </ul>
  <ul class="list">
    <li>hi</li>
    <li>hi</li>
  </ul>
</div>