无法管理位置元素

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;
}

我确信建议的dgvid建议对静态布局有好处。但由于面板和水平拉伸按钮的移动取决于膨胀和折叠，这不是一个合适的解决方案。

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）。