Question

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

Logo image and H1 heading on the same line

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

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通过以下步骤实现此目的：

使用CSS将header元素设置为flex-container 财产display: flex;
将<header>声明为弹性容器后，直接发送在这种情况下，您的h1元素和img元素就是儿童弹性物品。要对齐这些弹性项，您将添加CSS 您justify-content的属性align-items和<header> 元件。

实施例

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

CODE SNIPPET：

.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 免费。

代码段：

.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属性letter-spacing和 word-spacing用于分离而不是字符实体  
请勿将<header>包裹在语义无意义的<div>，<header>标签中本身很好。
我添加了一个CSS媒体查询来处理小型设备上的h1字体大小。
SVG替代方案可以保存您的HTTP请求，如果您愿意，还可以为其添加一些动画。
不要使用<b>标记，因为它只是一个样式标记，在这种情况下我完全删除了它，因为它不需要，但是当你需要它时，你应该使用<strong>代替。这是why。

附加资源

我之前发布了一个答案 here ，解释了对齐内容值，这可能会帮助您进一步了解该属性，以及更多信息部分中有关flexbox的其他信息。

Answer 2

header.solid
{
  border-style: solid;
  border-width: 2px;
}

header * {
  display: inline-block;
}

header img
{
  width: 75px;
  height: 75px;
}

header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}

 <div class="header">
  <header class="solid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  <h1 align="center"><b>TEST</b></h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  </header>
 </div>

这是否有效，或者您是否需要沿边缘的正确星形？

编辑：这是另一种解决方案，现在将星星带到外面。

header {
  display: flex;
}
  
header.solid
{
  border-style: solid;
  border-width: 2px;
}

header img
{
  width: 20%;
  height: 20%;
}

header h1 {
  width: 60%;
}

<div class="header">
  <header class="solid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  <h1 align="center"><b>T E S T I N G<br>I S<br>F U N</b></h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  </header>
 </div>

Answer 3

因为只有一张图片......

要解决此问题，请添加其他图片并添加ID。像image2 然后在第一张图片上也放了一个id。像image1。

然后将它们放在文本两侧的位置。

Answer 4

你走了：

https://jsfiddle.net/u60bg9tn/3/

HTML CODE

<div id="Main">
<div id="Left"><img src="Pictures/Star_Img.png" alt="star"/></div><div id="Middle"><h1><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></div><div id="Right"><img src="Pictures/Star_Img.png" alt="star"/></div>
</div>

CSS代码

#Main
{
height: 25vh;
width: 100vw;
border: 1px solid black;
position: relative;
}

#Left
{
height: 100%;
width: 15%;
position: relative;
vertical-align: top;
display: inline-block;
border: 1px red solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Middle
{
height: 100%;
width: 70%;
display: inline-block;
vertical-align: top;
border: 1px solid green;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Right
{
height: 100%;
width: 15%;
position: relative;
display: inline-block;
vertical-align: top;
border: 1px red solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Left img
{
height: 100%;
width: 100%;
}

#Right img
{
height: 100%;
width: 100%;
}

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

4 个答案:

实施例

CODE SNIPPET：

编辑：

注意

附加资源