html - 将 Logo 图像与我的 header 标签放在同一行

Question

我试图将 Logo 与我的 H1 header 标签放在同一行，它下面有一行，所以我希望 Logo 位于该行上方。我试过弄乱 HTML 标签的顺序，但我无法在不弄乱 H1 居中的情况下将 Logo 放在同一行上。

我试过将 margin: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; 设置为您的 Logo 和 top: 40px;，如下所示:

#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;
}

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