将徽标图像放在与标题标记相同的行上

Question

我正在尝试将徽标放在与我的H1标头标签相同的行上，它在它下面有一条线，所以我希望徽标在线上方。我已经尝试过乱搞HTML标签的顺序，但是我不能在同一条线上获得标识而不会弄乱H1的中心。

我已经尝试将保证金：0放在H1上，但仍然没有帮助。

下面的Css：

#dashTitle {
text-align: center;
font-family: Futura PT;
text-decoration: none;
padding-top: 0px;
position: center;
/*left:-129px;*/
top: 7px;
font-weight: bold;
font-size: 48px;


 }

#logoDash {
float: left;
width: auto;
margin-top: 0px;
margin-left: 10px;


 }

这是HTML，我试图以不同的方式订购标签

 <header id="dashboardHeader">


        <h1 id="dashTitle">STOCK TAKE</h1>
        <asp:Image ID="logoDash" runat="server" ImageUrl="Images/SBC_Logo.JPG" />
        <asp:Label ID="lblUserDetails" runat="server" Text=""></asp:Label>

        <hr />


    </header>

当前标题的外观图像

Answer 1

您可以将position:absolute;设置为您的徽标，并将top: 40px;设置为：

＆＃13;

＆＃13;

#dashTitle {
text-align: center;
font-family: Futura PT;
text-decoration: none;
padding-top: 0px;
font-weight: bold;
font-size: 48px;
 }

#logoDash {
position:absolute;
width: auto;
top:40px;
margin-left: 10px;
}

＆＃13;

<h1 id="dashTitle">
STOCK TAKE
</h1>
<img id="logoDash" src="http://via.placeholder.com/48x48"/>
<hr/>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.dashboardHeader {
  align-items: center;
  display: flex;
  justify-content: space-around;
}

.dashTitle {
  font-family: Futura PT;
  font-weight: bold;
  position: center;
  font-size: 48px;
}

.dash-line {
  width: 100%;
}

<header class="dashboardHeader">
  <img class="logoDash" src="https://i.imgur.com/kmNpJ2z.png">
  <h1 class="dashTitle">STOCK TAKE</h1>
  <img class="logoDash" src="https://i.imgur.com/kmNpJ2z.png">
</header>
<hr class="dash-line">

1. 我正在使用Flexbox将所有3个元素保留在<header>元素中。

2. 我将您的ID更改为类（在CSS中，这就是#现在为.）的原因。为什么？因为我没有理由在CSS中看到这种特异性。使用类，而不是ID。以下是一些关于特异性的文档的链接 - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

3. 以下是一个示例：https://jsfiddle.net/4fxgy3nb/

Answer 3

使用position: absolute;作为图片。

#dashTitle {
  text-align: center;
  font-family: Futura PT;
  text-decoration: none;
  padding-top: 0px;
  position: center;
  /*left:-129px;*/
  top: 7px;
  font-weight: bold;
  font-size: 48px;
}

#logoDash {
  position: absolute;
  top: 38px;
  left: 10px;
}

<header id="dashboardHeader">


  <h1 id="dashTitle">STOCK TAKE</h1>
  <img id="logoDash" src="//unsplash.it/75/50/" />
  <label id="lblUserDetails"></label>

  <hr />


</header>

Answer 4

#dashboardHeader {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

标题的这三行会将所有三个元素保留在一行中。

• 显示：flex; （运行flexbox布局）
• 对齐内容：空格; （在每个元素周围设置均匀空间，您可以根据自己的喜好调整此边距
• align-items：center; （这会将每个项目集中在自己的框中，再次......个人偏好。

Flexbox允许比位置/浮动使用更容易调整布局。查看CSS技巧以获取更多信息。