Question

我正在尝试垂直对齐div中的某些元素，并且由于某种原因它不起作用

我有类似

的东西

HTML

<div class="test">
    <a href="#"><img src="test.png"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="test1.png"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="test2.png"/></a>
    <a href="#">Text here...</a>
</div>

CSS：

.test{
    display: inline-block;
    height: 50px;
    position: relative;
    vertical-align:middle
}

.test img {
    vertical-align:middle;
}

基本上我的图像高度不同但我希望测试div内的所有内容都是垂直对齐的，无论图像高度是多少。有人可以帮我吗？非常感谢！

Answer 1

此解决方案可能无法涵盖所有实例，但设置line-height将获得您正在寻找的垂直对齐方式。为height交换line-height。

<div class="test">
    <a href="#"><img src="http://placehold.it/40x40"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="http://placehold.it/30x30"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="http://placehold.it/50x50"/></a>
    <a href="#">Text here...</a>
</div>

.test {
    display: inline-block;
    position: relative;
    line-height: 50px;        
}
.test img {
    vertical-align: middle;
}

jsFiddle：http://jsfiddle.net/hq1akdo6/

这种方法的主要警告是它不适用于多行文本。

Answer 2

在vertical-align属性中。这篇优秀的文章解释了它：

了解vertical-align，或＆＃34;如何（不）垂直居中内容＆＃34; 内联元素（以及仅内联元素）可以通过vertical-align：middle在其上下文中垂直对齐。但是，“context”不是整个父容器的高度，而是它们所在的文本行的高度.jsfiddle example

对于块元素，垂直对齐更难，并且在很大程度上取决于具体情况：如果内部元素可以具有固定高度，则可以将其位置设置为绝对位置并指定其高度，边距顶部和顶部位置。 jsfiddle的例子如果居中元素由一条线组成并且其父高度是固定的，则可以简单地设置容器的线高以填充其高度。根据我的经验，这种方法非常通用。 jsfiddle的例子 ......还有更多这样的特殊情况。

Answer 3

试试这个

CSS：

.test{
    float:left;
}

HTML：

<div class="test">
    <a href="#"><img src="test.png"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="test1.png"/></a>
    <a href="#">Text here...</a>
</div>

<div class="test">
    <a href="#"><img src="test2.png"/></a>
    <a href="#">Text here...</a>
</div>

Answer 4

我在想这就是你要找的这个fiddle

    .test{
        height: 100px;
        width: 100px;
        margin:10px;
        text-align: center;
        display:table-cell;
        vertical-align:middle;
    }

    .test a {
        display:block;
    }

这里的关键是

  display:table-cell

Answer 5

这应该适合你：

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="300" height="300">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

<style>
figcaption {
    margin-top: 50px;
}
</style>

如何在我的情况下垂直对齐元素

5 个答案: