Reputation: 61666
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
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
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
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
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