0

I'm trying to get 4 circle images to display on the same line, with the final circle containing a single digit number. I have the following code which gets close, but the final circle gets bumped down a bit by having text. I do not understand why the circle gets bumped down.

Thanks for any help.

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}
li:nth-child(n+2) { margin-left: -20px; }
<ul>
  <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>
Eric Conner
  • 10,422
  • 6
  • 51
  • 67

2 Answers2

1

You can use the vertical-align property. Information here.

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
  /* added */
  vertical-align: top;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}

li:nth-child(n+2) {
  margin-left: -20px;
}
<ul>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar"></div>
  </li>
  <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>
sol
  • 22,311
  • 6
  • 42
  • 59
1

inline-block default alignment is baseline, that is the reason it is aligned with bottom. You have to apply vertical-align:top to the inline-block element to make aligned top.

.avatar {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #E2E8ED;
  border-radius: 50%;
  box-shadow: inset 0 1px 3px 0 rgba(225, 232, 236, 0.7);
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align:top;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  background: #FFF;
}
li:nth-child(n+2) { margin-left: -20px; }
<ul>
  <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar"></div>
   </li>
   <li>
    <div class="avatar">
      <span>3</span>
    </div>
  </li>
</ul>
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • Thank you for the explanation! Do you know why this behavior only shows up once there is text content inside the div? – Eric Conner Mar 02 '18 at 05:38
  • you can get more information from here https://stackoverflow.com/questions/12950479/why-does-this-inline-block-element-have-content-that-is-not-vertically-aligned – Suresh Ponnukalai Mar 02 '18 at 05:54
  • Ah I see The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. – Eric Conner Mar 03 '18 at 00:14