Question

我检查了很多SO帖子，查看了各种垂直对齐技巧（-50％，表格单元格等），但我仍然无法弄清楚这一点。

<div class="main">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Information_icon.svg"/>
    <div class="text"><span class="inner-text">this is some text</span></div>
</div>

我需要让图像和文本div绝对定位并略微偏移顶部和底部。

我可以很好地定位图像，但对齐文本会出现问题。如何垂直和水平对齐文本？

请不要弯曲。

Answer 1

我不确定你要做什么，@ Raznyy回答了你所要求的偏移。如果你希望它们在中间垂直对齐，那么你可以这样做。

https://jsfiddle.net/emszzgcs/6/

我为内容添加了另一个div，使它们像桌子一样。

.main {
    height: 100%;
    width: 100%;
    background: pink;
    display: table;
}

.main-content {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

Answer 2

我希望你想要这样的FIDDLE。

文字根据需要垂直对齐; 您只需要<div class='text'> - width:100%和text-align:center; 希望它有所帮助！

这是示例代码：

.text{
    display: block;
    position: absolute;
    top: 150px;
    bottom: 100px;
    right: 0;
    left: 0;
    margin: 0 auto
     /* */
    width:100%;
    text-align:center;
}

**编辑**

Here's is new code. 我将height设置为20px，因此如果您希望它垂直对齐，则只需设置top:50%和margin-top: -10px，因为它是元素高度的一半。对不起，我错了。 `

在绝对div中垂直对齐？

2 个答案: