Question

所以我有这个CSS框：

.navigation-div
{
    text-align:right;
    margin-top:14px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.47);
    padding: 0;
    color:#E3E3E3;
    background-color: #333;
}

带有图像及其中的一段文字

#mailtext
{
    margin-top:-10px;
    display:inline-block;
    font-size:20px;
    color:white;
    font-style:italic;
}
#mailpicture
{
    display:inline-block;
    margin-top:16px;
}

这是我的HTML：

<div class="navigation-div">
    <nav class="navigation">
        <h1 id="mailtext">Mail Us</h1>
        <a href="mailto:info@email.com"><img id="mailpicture" src="images/gmail.png"></a>
    </nav>
</div>

目前，导航类没有样式。邮件图片位于正确的位置，但我想要向上移动的文本。正如您从 #mailtext 样式中看到的那样，我有margin-top：-10px;这不会向上移动文本。

如果使用或不使用margin-top，我将如何向上移动此文本。

这个问题就像我之前的question一样，但现在文字不会转到我想要的地方（向上）。使用margin-left是不好的，但是当我这样做时，我也可以将边距移动到顶部。由于navigation-div的文本对齐方式正确，因此可能会弄乱它。

如何在不使用边距的情况下移动边距顶部，将文本保持在相同位置。我想将文字与图像放在同一行，而不是上面。图片在正确的位置，我想要移动的是文本更高。我希望文本与同一行上的图像中心平行。

我发布的上一个问题是关于将所有元素保持在同一行，这一个是关于移动margin-top。

Answer 1

要将文字对齐一点，您需要将margin-top替换为position: relative和top:-10px，就像在代码段和小提琴中一样。

对于更有效的解决方案，我建议使用CSS属性vertical-align。在这种情况下，如果图像（大小）发生变化，它仍将与文本对齐。

JSFiddle

.navigation-div {
  text-align: right;
  margin-top: 14px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
  padding: 0;
  color: #E3E3E3;
  background-color: #333;
}
#mailtext {
  position: relative;
  top: -10px;
  display: inline-block;
  font-size: 20px;
  color: white;
  font-style: italic;
}
#mailpicture {
  display: inline-block;
  margin-top: 16px;
}

<div class="navigation-div">
  <nav class="navigation">
    <h1 id="mailtext">Mail Us</h1>
    <a href="mailto:info@email.com">
      <img id="mailpicture" src="images/gmail.png">
    </a>
  </nav>
</div>

Answer 2

修改

.navigation { margin-top:14px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.47); padding: 0; color:#E3E3E3; background-color: #333; width: 100%; height: 100px; } .container { display: flex; align-items: center; justify-content: center; float: right; line-height: 0.5; text-align: center; margin-right: 20px; } #mailtext { align-self: center; font-size: 20px; color: white; font-style: italic; margin-right: 15px; } #mailpicture { align-self: center; }

<nav class="navigation"> <div class="container"> <h1 id="mailtext">Mail Us</h1> <a href="mailto:info@email.com"> <img id="mailpicture" src="images/gmail.png"> </a> </div> </nav>

JS Fiddle

Answer 3

内联块元素存在问题，尤其是当一个是块元素而另一个是内联元素时。我要做的是将父字体大小设置为0并返回到H1元素以设置所需的字体大小。然后，我将垂直对齐设置为中间。

提及：设置id到图像元素不起作用，恕我直言，不使用包含它的链接。它们都是内联元素，一个必须包含另一个，就像块一样，对吗？

检查代码，它有点简化，但你一定会解决它。

.navigation-div {
  background: #333;
  color: #fff;
  font-size: 0;
  text-align: right;
}
#mailtext {
  font-size: 20px;
  margin-right: 5px;
}
.navigation a,
#mailtext {
  display: inline-block;
  vertical-align: middle;
}
#mailpicture {
  display: block;
}

<div class="navigation-div">
    <nav class="navigation">
        <h1 id="mailtext">Mail Us</h1>
        <a href="mailto:info@email.com"><img id="mailpicture" src="images/gmail.png"></a>
    </nav>
</div>

Answer 4

我不知道你的徽标有多大，但这是一种相对干净的方法。

对于两个内联块元素#mailtext和#mailpicture，请设置vertical-align: middle。

对于#mailtext，将h1标记的默认边距清零。

对于#mailpicture，根据需要调整左右边距，以获得适合您设计的水平空白区域。然后相应地设置上下边距。

vertical-align属性将保持两个元素相对于彼此居中。

但是，如果您的图片是图片的视觉中心不在图片的中间高度，您可以将position: relative添加到#mailtext并调整top或bottom偏移（使用一个或另一个）。

如果您的图像高度实际上小于文本的高度，请将位置相对调整应用于图像而不是文本。

＆＃13;

.navigation-div {
  text-align: right;
  margin-top: 14px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
  padding: 0;
  color: #E3E3E3;
  background-color: #333;
}
#mailtext {
  display: inline-block;
  vertical-align: middle;
  margin: 0; /* zero out h1 margins */
  font-size: 20px;
  color: white;
  font-style: italic;
}
#mailpicture {
  display: inline-block;
  margin: 10px; /*adjust as needed */
  vertical-align: middle;
}
.ex2 #mailtext {
  font-size: 2.5em;
  margin: 10px 0;
}
.tweak #mailpicture {
  position: relative;
  bottom: 5px; /* use top if you want to move the image downward */
}

＆＃13;

<div class="navigation-div">
  <nav class="navigation">
    <h1 id="mailtext">Large Logo - Mail Us</h1>
    <a href="mailto:info@email.com">
      <img id="mailpicture" src="http://placehold.it/100x50">
    </a>
  </nav>
</div>

<div class="navigation-div ex2">
  <nav class="navigation">
    <h1 id="mailtext">Small Logo - Mail Us</h1>
    <a href="mailto:info@email.com">
      <img id="mailpicture" src="http://placehold.it/100x10">
    </a>
  </nav>
</div>

<div class="navigation-div ex2 tweak">
  <nav class="navigation">
    <h1 id="mailtext">Position Tweak - Mail Us</h1>
    <a href="mailto:info@email.com">
      <img id="mailpicture" src="http://placehold.it/100x10">
    </a>
  </nav>
</div>

＆＃13;

HTML / CSS Css框弄乱了上边距

4 个答案: