CODEWITHSUNDEEP
htmlcss
AngryHacker
AngryHacker

Reputation: 61666

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

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>

Upvotes: 2

Views: 54

Answers (4)

Temani Afif
Temani Afif

Reputation: 274385

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>

Upvotes: 0

dale landry
dale landry

Reputation: 8610

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>

Upvotes: 1

Vishal
Vishal

Reputation: 255

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>

Upvotes: 1

UModeL
UModeL

Reputation: 1227

.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>

Upvotes: 1

Related Questions