Keep symbol and text on same line? - html

Question

I've got this and it's not working
.header {
text-align: center;
background: #9f7a2b;
color: white;
}
span.nowrap {
white-space: nowrap;
}
span.title {
font-family: 'Computer Modern Serif', georgia;
font-variant: small-caps;
display: block;
text-align: center;
letter-spacing: .4em;
font-size: 2.3rem;
}
<div class="header">
<img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" class="center">
<span class="nowrap">∘<span class="title">My Title</span></span>
<p>My supercool header</p>
</div>
I want the circle symbol and the "My Title" text on the same line, but the symbol tight, not spaced at the beginning of the line. Now I get the symbol above the title line. Any ideas what I'm doing wrong?

Answer 1

You added display: block; property to the span.title element. As the result, the element is stretched to full available width. You can use a following code to solve your problem.
.header {
display: flex;
flex-direction: column;
align-items: center;
background: #9f7a2b;
color: white;
}
span.nowrap {
white-space: nowrap;
}
span.title {
font-family: 'Computer Modern Serif', georgia;
font-variant: small-caps;
letter-spacing: .4em;
font-size: 2.3rem;
}
<div class="header">
<img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" class="center">
<span class="nowrap">∘<span class="title">My Title</span></span>
<p>My supercool header</p>
</div>

Answer 2

Replace
<span class="nowrap">∘<span class="title">My Title</span></span>
by
<div class="title"><span class="symbol">∘</span>My Title</div>.
Look the following code:
.header {
text-align: center;
background: #9f7a2b;
color: white;
}
.symbol {
font-size: 1.8rem;
}
.title {
font-family: 'Computer Modern Serif', georgia;
font-variant: small-caps;
display: block;
text-align: center;
letter-spacing: .4em;
font-size: 2.3rem;
}
<div class="header">
<img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" class="center">
<div class="title"><span class="symbol">∘</span>My Title</div>
<p>My supercool header</p>
</div>

Answer 3

You can fix your problem using display: flex; and align-items: center; Then the content will show inline... here are my code check it hope it will help you :)
.header {
text-align: center;
background: #9f7a2b;
color: white;
}
span.nowrap {
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
span.title {
font-family: 'Computer Modern Serif', georgia;
font-variant: small-caps;
display: block;
text-align: center;
letter-spacing: .4em;
font-size: 2.3rem;
}
<div class="header">
<img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" class="center">
<span class="nowrap">∘<span class="title">My Title</span></span>
<p>My supercool header</p>
</div>