How do I align 3 spans but push one a bit lower

AngryHacker_9382 0
Viewed 51

I have a <span> that is a container to 3 child spans. I would like to lower the middle span (the circle) 1px or 2px. Or alternatively, raise the left and right span 1 or 2px.

However, changing one thing affects the other. How can I lower the circle or raise up the text?

.time {
  display: inline-block; 
  width: 130px; 
  height: 100%;
}

.circle {
  display: inline-block; 
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
}

.case {
  display: inline-block; 
  height: 100%;
}
<span>
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

css html
4 Answers

with css3 nth-child you can control the span.

.time {
  display: inline-block;
  width: 130px;
  height: 100%;
}

.circle {
  display: inline-block;
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
}

.case {
  display: inline-block;
  height: 100%;
}

.SpanWrap span:nth-child(2) {
  position: relative;
  top: 10px;
  right: 10px;
}
<span class="SpanWrap">
  <span class="time">9:00 AM - 1:00 PM</span>
<span class="circle"></span>
<span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

user_98193020 

.time {
  display: inline-block; 
  width: 130px; 
  height: 100%;
}

.circle {
  display: inline-block; 
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
  transform: translateY(-5px);
}

.case {
  display: inline-block; 
  height: 100%;
}
<span>
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

user_101794150

Add a display flex to your parent element and the margin within the child containing the circle will control the circle element.

Alternatively with display flex approach you could also do an align-items: flex-start or center on the parent, then on your child circle element, do align-self: flex-end; and it would have a similar effect, aligning the other two spans a bit higher than the one with align-self: flex-end;.

.parent {
  display: flex;
  align-items: center;
}

.time {
  width: 130px; 
  height: 100%;
}

.circle {
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
}

.case {
  height: 100%;
}
<span class="parent">
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

Using align-self on child circle element:

.parent {
  display: flex;
  align-items: center;
}

.time {
  width: 130px; 
  height: 100%;
}

.circle {
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  /* margin-top: 7px; <--- no longer needed */
  margin-right: 20px;
  align-self: flex-end;
}

.case {
  height: 100%;
}
<span class="parent">
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

user_15335920

vertical-align accept pixel value (and length in general) so use it to adjust the alignment like you want

.time {
  display: inline-block; 
  width: 130px; 
  height: 100%;
}

.circle {
  display: inline-block; 
  height: 14px;
  width: 14px;
  background-color: #006600;
  border-radius: 50%;
  margin-left: 26px;
  margin-top: 7px;
  margin-right: 20px;
  vertical-align: -6px; /* here */
}

.case {
  display: inline-block; 
  height: 100%;
}
<span>
  <span class="time">9:00 AM - 1:00 PM</span>
  <span class="circle"></span>
  <span style="">9am-1pm ZM: Frank Rizzo vs. Holiday Star Inn, LLC, et al.</span>
</span>

user_86203330
Related