如何在中间垂直对齐图像和文本？ [英] How to align an image and text vertically in the middle?

问题描述

我有一个DIV在顶部和几个锚点。首先是一个标志，其余的是文本。我设置的样式如下。

  div.nav-top {
 height：120px; 
 vertical-align：middle; 
} 
 
 a.nav-logo {
 background：no-repeat url（Logo.png）; 
 background-size：200px 40px; 
 width：200px; 
 height：40px; 
 display：inline-block; 
} 
 
 a.nav-link {
 vertical-align：middle; 
} 
  

但是，这些元素不在< >。对齐似乎遵循在顶部的图像。文字位于相对于图片的中间。这不是一个坏主意但我需要整个系统img-a-a-a-a垂直居中。现在我填充它，但一旦外部DIV的高度改变，一切都会破裂。

我做错了什么？

（我发现

解决方案

您可以参考此博客，其中所有者描述了中心问题。他开始2001 但注意最后一次更新是在去年夏天，我很佩服他的坚持，他提出了如何集中在不同版本的CSS的清楚的例子。

你的情况下，我建议你使用 display：flex 这样。注意，整个中心魔法是从包含控制和强加在底层的孩子。实际上，根本不需要设置 nav-link 的样式。

  div.nav-top {
 height：120px; 
 background-color：purple; 
 padding：10px; 
 display：flex; 
 align-items：center; 
} 
 
 a.nav-logo {
 background：no-repeat url（Logo.png）; 
 background-size：200px 40px; 
 background-position：center center; 
 width：200px; 
 height：100％; 
} 
 
 a.nav-link {} 
  

一个新事物在造型和最近实施。其缺点是，旧的浏览器可能会呈现它的问题。但是，它的优势在于，对于设计师来说更直观（除非公司集中管理浏览器，否则浏览器的浏览器版本不是很好）。

您可能希望使用锚点控件的 margin ，因为它们会被压缩。此外，大小和字体将需要调整。如果你这样做，你可能最终需要的风格，我建议不需要，但这只是你知道的细节。

  a.nav-link {
 margin：10px; 
 font-size：20px; 
 font-family：Comic Sans MS，Comic Sans，cursive; 
} 
  

I have a DIV at the top and a few anchors. First is styled with a logo and the rest are text. The styles I've set are as follows.

div.nav-top {
  height: 120px;
  vertical-align: middle;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  display: inline-block;
}

a.nav-link {
  vertical-align: middle;
}

However, these elements are not centered in the div. The alignment seems to follow the image, which is at the top. The text gets in the middle relative to the image. It's not a bad idea but I need the whole system img-a-a-a-a to be centered vertically. At the moment I pad it but as soon as the height of the outer DIV changes, everything breaks.

What am I doing wrong?

(I've found this post but here they apply tables and such. Doesn't seem like the most appropriate solution. Perhaps I'm mistaken?

解决方案

You can refer to this blog, where the owner describes centering issues. He started 2001 but be aware that the last update's been made last summer, and I admire his persistence. He presents clear examples on how to center in the different versions of CSS.

In your case, I'd suggest that you use display: flex like so. Note that the whole centering magic's done from the containing control and imposed on the underlying children. There's actually no need to style nav-link at all (see remark below the example, though).

div.nav-top {
  height: 120px;
  background-color: purple;
  padding: 10px;
  display: flex;
  align-items: center;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  background-position: center center;
  width: 200px;
  height: 100%;
}

a.nav-link { }

That's a new thing in styling and recently implemented. The disadvantage of that is that older browsers might have problems rendering it. But the upside is that it's much more intuitive to the designers (and fetching a decent version of a browser is not a far reach, unless managed centrally by the corporate).

You might want to use margin for the anchor controls, as they're going to be squashed toghether. Also, the sizes and fonts will need adjusting. If you do that, you'll probably end up needing the style which I suggested wasn't needed but that's specifics only you're aware of.

a.nav-link {
  margin: 10px;
  font-size: 20px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

这篇关于如何在中间垂直对齐图像和文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！