css - 无法定位元素

Question

我有一个包含 IMG 标签和另一个 Span 标签的 Span 标签。我希望内部 Span 标签向左对齐，IMG 标签居中对齐，而且我希望这两个标签都在中间垂直对齐，但我似乎无法做到这一点......

这是它的外观(它是蓝色的，因为在 FireBug 中标记了外部 Span 标签以表明它正在拉伸(stretch)整个表面):

正如您在图片中看到的，两个标签都居中并且它们也在容器的顶部对齐，我不想要这两个。

这是标记:

这是标签的当前 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;
}

我确定建议dgvid建议对于静态布局会很好。但是由于面板和水平拉伸(stretch)的按钮会根据展开和折叠而移动，所以这不是一个合适的解决方案。

Answer 1

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

另请参阅这篇文章:Understanding vertical-align, or "How (Not) To Vertically Center Content"

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

1. 赋予容器元素 CSS 属性“position: relative”
2. 给要居中的元素 CSS 属性 position: absolute
3. 将要居中的元素的 CSS top 属性设置为 (containerHeight/2) - (centeredEltHeight/2)。