将徽标添加到文本两侧的标题中

Question

我是HTML新手,正在为我的家庭/自我项目创建一个网站,我遇到了一个小问题.我试图在文本两侧的标题内插入一个徽标.由于以下原因,我能够在文本的左侧获取图像:

徽标图像和H1标题在同一行

但是,我遇到了将图像放到文本另一侧的问题.

header.solid
{
  border-style: solid;
  border-width: 2px;
}

.header img
{
  float: left;
  width:75px;
  height:75px;
}

.header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}


 <div class="header">
  <header class="solid">
  <img src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp;  &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1>
  </header>
 </div>

非常感谢任何帮助,如果这是一个简单的修复道歉

编辑:道歉所有,当我发布代码时,我删除了第二个img标记

这是目前的情况.

<div class="header">
<header class="solid">
  <img class="leftimg" src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>TEST</b></h1>
  <img class="rightimg" src="Pictures/Star_Img.png" alt="star"/>
</header>
</div>

和leftimg和rightimg的id标签:

.leftimg
{
  float: left;
  width:75px;
  height:75px;
}

.rightimg
{
  float: right;
  width:75px;
  height:75px;
}

然而,这给了我这些结果:

http://s1160.photobucket.com/user/WickedSniper03/media/Header_Img_zpsqzve4jf6.png.html

Answer 1

您可以使用flexbox通过以下步骤实现此目的:

1. header使用CSS属性使元素成为flex-containerdisplay: flex;
2. 一旦你声明你<header>的flex容器,直接
   子节点,在这种情况下你的h1元素和img元素,现在是flex项目.要对齐这些弹性项,您将添加CSS属性justify-content并添加 align-items到<header> 元素中.

例:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

代码链:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}

<header class="solid">
  <img src="http://placehold.it/75x75" alt="star" />
  <h1>Proven Leadership</h1>
  <img src="http://placehold.it/75x75" alt="star" />
</header>

编辑:

如果您使用的是星形,则可以利用SVG,这将为您节省HTTP请求.

- SVG取自IcoMoon Free.

代码片段:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
.icon-star-full {
  color: gold;
  font-size: 4em;
}
#symbols {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}

<header class="solid">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <h1>Proven Leadership</h1>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</header>

<svg id="symbols">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path class="path1" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

笔记

• 您应该使用CSS属性字母间距和 字间距来分隔而不是字符实体  
• 不要将你<header>的语言包裹在无意义的标签中<div>,<header>标签本身就可以了.
• 我添加了一个CSS媒体查询来处理小型设备上的h1字体大小.
• SVG替代方案可以保存您的HTTP请求,如果您愿意,还可以为其添加一些动画.
• 不要使用<b>标签,因为它只是一个样式标签,在这种情况下我完全删除它,因为它不需要,但是当你需要它时,你应该使用它<strong>.这就是原因.

附加资源

我之前在此处发布了一个答案,解释了对齐内容值,这可能有助于您进一步了解该属性,以及更多信息部分中有关flexbox的其他信息.