无法定位元素

Question

我有一个包含IMG标签和另一个Span标签的Span标签。我希望内部的Span标签与左边对齐，IMG标签集中对齐，另外，我希望这两个标签在中间垂直对齐，而我似乎不能做到这一点.

这就是它的外观(它是蓝色的，因为外层Span标记在FireBug中被标记，以显示它正在拉伸整个表面)：

​

​

正如你在图像中所看到的，两个标签都是中心的，它们也对齐在容器的顶部，我不想这样做。

这是标记：

​

​

这是标记的当前CSS：

.v-button-wrap {
    height: 100%;
    display: block;
    padding: 6px 15px 0 9px;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-icon {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-button-caption {
    text-align: left;
    line-height: normal;
    vertical-align: middle;
}

我遗漏了与我的问题、颜色、字体规格等无关的CSS。不用说，我不是CSS的高手。我已经查阅了一些关于这个问题的指南，但是我只找到了一个div的全部内容都是中心的例子，这不是我想要的。

有谁有良好的CSS知识，看到问题在我的代码？或者有别的解决办法来解决我的问题..？

谢谢!

编辑：，这是由于请求，整个布局的屏幕截图。抱歉我得把一些事情弄模糊..。但无论是哪种情况，它们都不重要。=)

​

​

EDIT2:我确实使用以下CSS解决了我的问题：

.v-button-details-panel-header .v-button-wrap {
    height: 100%;
    text-align: inherit;
    padding: 0px;
}

.v-button-details-panel-header .v-button-wrap .v-button-caption {
    display: table-cell;
    position: relative;
    text-align: left;
}

.v-button-details-panel-header .v-button-wrap .v-icon {
    display: table-cell;
    position: relative;
    top: 12px;
    margin-left: auto;
    margin-right: auto;
}

我相信戴维德提出的建议对于静态布局是有益的。但由于面板和水平拉伸按钮的移动取决于膨胀和崩溃，这不是一个合适的解决方案。

Answer 1

您可能需要将img和span.v_button_caption的CSS display属性设置为inline-block。

还请参阅本文：理解垂直对齐，或“如何(不)到垂直中心内容”。

至于实现所需结果的另一种技术:如果您知道容器元素的高度，并且知道要居中的元素的高度(不幸的是，从您发布的CSS中，您似乎不知道)，那么您可以

1. 给容器元素CSS属性“位置:相对”
2. 提供以元素为中心的CSS属性position: absolute。
3. 将要居中的元素的CSS top属性设置为(containerHeight / 2) - (centeredEltHeight / 2)。