问题：

Question

问题：

图像将文本向右推到“其他东西”一直到右边。这是由我调整图像大小造成的。我希望“其他东西在这里”文本直接在“品牌”文本的右边。我认为这是由于我调整图像大小所致。

HTML：

<header class="header">
    <nav class="navbar">
        <a class="navbar-brand" href="/index.php">
            <img src="http://i.imgur.com/6ZjLmn4.png" class="navbar-brand-image" alt="">
            <span>Brand</span>
        </a>
        <div>
            Other stuff here
        </div>
    </nav>
</header>

的CSS：

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  align-content: center;
  background: #333333;
  padding: 0.25rem 0.5rem;
  height: 50px; 
}

.navbar-brand {
  margin-right: 1rem;
  white-space: nowrap;
  font-size: 25px;
  display: flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  color: #ead911;
  text-decoration: none; 
}

.navbar-brand-image {
  display: block;
  height: 90%;
  width: auto;
  margin-right: 6px; 
}

我尝试了什么：

我在互联网上看到这是由图像作为内联元素引起的。我试着给它显示：块;但这并没有改变任何事情。显示flex也没有改变任何东西。

我尝试的其他解决方案包括float:left，vertical-align 0和line-height 0这些都没有帮助。

给图像宽度有帮助，但我不想硬编码图像的宽度，因为图像将来可能会改变。

Answer 1

您使用display: flex的具体原因是什么？我认为这会导致你的问题。见https://jsfiddle.net/zz9fta8g/1/。

已移除display: flex
将“其他内容”<div>设置为display: inline-block
从display: block

.navbar-brand

将.navbar-brand-image设为vertical-align: middle

Answer 2

如果在.navbar-brand

中添加宽度，是否有任何问题

.navbar-brand {
  margin-right: 1rem;
  white-space: nowrap;
  font-size: 25px;
  display: flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  color: #ead911;
  text-decoration: none; 
  width:120px;
  }

愿它能帮到你。

图像右侧有隐形边距

问题：

我尝试了什么：

2 个答案: