使用css对齐标题中的图片答案

【问题标题】：Align a picture in a header using css使用css对齐标题中的图片
【发布时间】：2020-12-01 22:25:19
【问题描述】：

我想在我的网站标题中移动图片。它最终应该与登录和注册按钮对齐（类似于标题中的堆栈溢出 - 一切都对齐）。我已经尝试解决这个问题好几个小时了，不幸的是没有任何效果。

html 中的标题

<img src="/static/logo.png" alt="Start" class="header_logo" id="header_logo">

{% if session['loggedin'] %}

    <button  type="button" onclick="{{ url_for('logout') }}" class="header_logout">Logout</button>

{% else %}

    <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>

    <button type="button" onclick="{{ url_for('register') }}"
    class="header_register">Registrieren</button>

{% endif %}

css 文件

.header {
    position: fixed;
    top: 0;
    background-color: lightgrey;
    width: 100%;
    text-align: right;
    display: inline-block;
    font-size: 2vw;

}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

Here is how it is displayed

如果有人可以帮助我，我会很高兴。 :)

【问题讨论】：

将.header_logo { display: block; } 切换为.header_logo { display: inline-block; }。或者，您可以使用 flexboxes 或 css-grid 来完成。

标签： html css head html-heading

【解决方案1】：

弹性怎么样？ Flexbox 比浮动更可靠。

.header {
  padding:1rem 0.2rem;
  display:flex;
  justify-content: flex-end;
  align-items:center;
  position: fixed;
  top: 0;
  background-color: lightgrey;
  width: 100%;
  text-align: right;
  font-size: 2vw;

}
.header .logo img {
  width:10rem;
}
.header .logo {
  margin-right: auto;
}
.header .interaction_buttons {
   display:flex;
}
.header .interaction_buttons button:first-child {
  margin-right:1rem;
}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

<div class="header">
  <div class="logo">
     <img src="https://bankingthefuture.com/wp-content/uploads/2019/04/dummylogo.jpg" alt="">
  </div>
  <div class="interaction_buttons">
     <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>
    <button type="button" onclick="{{ url_for('register') }}"   class="header_register">Registrieren</button>
  </div>
</div

【讨论】：

【解决方案2】：

您是否尝试过在 css 中使用“float”？我在想你可以使用“float:right;”在登录/注销按钮上。

【讨论】：

嗨，欢迎来到 SO。您的 anwser 仅仅是评论而不是 anwser。不要使用 anwser 选项，除非您可以 100% 肯定地回答它并用代码 sn-p 证明它并说明您的工作。但是，您也错过了回答问题，因为按钮已经向右对齐，只是与徽标不在同一行。最后但并非最不重要的一点是，您的建议很糟糕。将float 用于样式目的不仅已经过时，而且不是float 的预期用途。 Float 只能用于文本段落中的浮动图像。

【解决方案3】：

在.header_logo 类中，您使用block 值指定了display 属性！ display: block; 采用孔线，这就是为什么您的按钮被放置在下一行。
另一方面，最好将 float 用于 img 和按钮
您可以在此处查看display 属性的一些示例：https://www.w3schools.com/cssref/pr_class_display.asp

【讨论】：

不要将浮点数用于此类任务。在这种情况下，浮动不仅过时，而且是一个误用的工具。这就是你拥有弹性盒的目的。 Float 只能用于在文本段落中浮动图像。
我不反对！我评论的主要思想是为display 使用！我只提到了float，以防他/她想为此使用一些额外的东西！