无法定位元素

Posted 2023-03-05

【中文标题】无法定位元素

【英文标题】：Can't manage to position elements

【发布时间】：2012-01-11 13:55:11

【问题描述】：

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

这是它的外观（它是蓝色的，因为在 FireBug 中标记了外部 Span 标记以表明它正在拉伸整个表面）：

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

这是标记：

这是标签的当前 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 提出的建议对于静态布局会很有用。但是由于面板和水平拉伸的按钮会根据展开和折叠而移动，这不是一个合适的解决方案。

【问题讨论】：

很难辨认出您发布的图片。也许您想要实现的屏幕截图以及我们可以复制/粘贴的 html sn-p 会有所帮助。

我可以发一张截图。发布 HTML 将非常困难.. 你看我正在 Vaadin 开发（类似 GWT 的框架），我真的无法控制标记，它是从 java 代码生成的，我可以在 FireBug 中看到的标记非常难跟...共事。标签上的标签上的标签....所以我已经添加的小型 HTML sn-p 几乎是我能得到的。但是，发布的这个sn-p应该是唯一影响我所指的定位的东西。

【参考方案1】：

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

另见这篇文章：Understanding vertical-align, or "How (Not) To Vertically Center Content"

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

给容器元素CSS属性`position:relative' 赋予元素居中CSS属性position: absolute 将待居中元素的 CSS top 属性设置为 (containerHeight / 2) - (centeredEltHeight / 2)。

【讨论】：

谢谢！我会看看这个。现在在下班途中，所以我无法立即对其进行测试...我认识到了解垂直对齐或“如何（不）垂直居中内容”，我在自己的研究中遇到了它，我想我会再看一遍！但我会在星期一回来试一试

好文章。这非常有用。