Question

HTML：

<div id="header">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
        <a href="1.html">blah</a>
        <a href="2.html">blah</a>
        <a href="3.html">blah</a>
</div>

图片是徽标的占位符。

CSS：

body {
    margin: 0;
    padding: 0;
    font-family: "Century Gothic", Tahoma, Arial;
}

#header img {
    margin-right: 130px;
}

#header a {
    text-decoration: none;
    margin-right: 60px;
    color: #000000;
}

基本上，我想要标签＆＃34; blah＆＃34;位于图像的垂直中心。我已经尝试在＆＃34; #header a＆＃34;中添加底部和顶部填充和边距。选择器，但它不起作用。标签继续与图片的下边缘对齐。

Answer 1

如果你想把图像作为div的背景，你可以用图像设置背景。

  #header{
        background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
        text-align:center;
    }

Answer 2

尝试此css，我认为这对您有所帮助，请参阅Fiddle Demo

CSS：

body {
    margin: 0;
    padding: 0;
    font-family: "Century Gothic", Tahoma, Arial;
}

#header img {
  float: left;
  margin-right: 60px;
}

#header a {
  color: #000000;
  float: left;
  margin-right: 40px;
  padding: 9% 0;
  text-decoration: none;
}

Answer 3

将此属性添加到您的css选择器 - #header img

display: inline-block;
vertical-align: middle;

我为你创造了一个小提琴。你能检查一下吗？希望这会有所帮助。

https://jsfiddle.net/uh4hs4ze/

为什么以下元素显示在div的底部边缘？

3 个答案: