Keep symbol and text on same line?-CodePudding

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 >
  <img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" >
  <span >&#8728;<span >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?

CodePudding user response：

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 >
  <img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" >
  <span >&#8728;<span >My Title</span></span>
  <p>My supercool header</p>
</div>

CodePudding user response：

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 >
  <img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" >
  <span >&#8728;<span >My Title</span></span>
  <p>My supercool header</p>
</div>

CodePudding user response：

Replace

<span >∘<span >My Title</span></span>

<div ><span >∘</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 >
  <img src="./images/3d-graph-model.png" style="padding: 15px 0px 22px 0px" alt="3-d graph" >
  <div ><span >&#8728;</span>My Title</div>
  <p>My supercool header</p>
</div>