保持符号和文本在同一行？

Question

我有这个，但它不起作用

.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">&#8728;<span class="title">My Title</span></span>
  <p>My supercool header</p>
</div>

我希望圆圈符号和“我的标题”文本在同一行，但符号紧，行首没有间距。现在我得到标题行上方的符号。知道我做错了什么吗？

Answer 1

您已将 display: block; 属性添加到 span.title 元素。结果，元素被拉伸到全部可用宽度。您可以使用以下代码来解决您的问题。

.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">&#8728;<span class="title">My Title</span></span>
  <p>My supercool header</p>
</div>

Answer 2

您可以使用 display: flex; 解决您的问题；和 align-items: center; 然后内容将内联显示...这是我的代码检查它希望它能帮助你:)

    .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">&#8728;<span class="title">My Title</span></span>
      <p>My supercool header</p>
    </div>

Answer 3

替换

<span class="nowrap">∘<span class="title">My Title</span></span>

来自

<div class="title"><span class="symbol">∘</span>My Title</div>.

看下面的代码：

.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">&#8728;</span>My Title</div>
  <p>My supercool header</p>
</div>

保持符号和文本在同一行？

Keep symbol and text on same line?

html

css