html - 无论屏幕分辨率如何，都将文本垂直对齐到跨度/标签的中间

Question

我可以在 span(位于 div 内)中垂直对齐文本，但我需要我的页面独立于屏幕分辨率。当我更改分辨率时，已经使用行高功能来阻止我的文本超出 div。但是我看到它在所有分辨率中都没有垂直对齐为中间。我应该研究 CSS 中的哪些功能？

<div>
 <span style="width:49%; height:50%; top:25%; left:0%; line-height:50%;font-size:x-small;font-family:Verdana;font-weight:bold; position:absolute; display:block;">
      Random Text
    </span>
</div>

上面的 span 标签在一个 div 中。另外 line-height 的推荐值应该是多少。它应该与 span 标签的高度相同吗？ 我看到了this link用于理解单行文本的垂直对齐。

> Some other CSS doubts>> 1. a textbox inside a div containing single line of text also goes out of the control while changing screen resolution. what could I possibly do to solve this?I am about to control it in a button

Answer 1

删除那些 position 除非非常需要和使用，display:table-cell

Fiddle Demo

div  span {
    border:1px solid red;
    width:49%;
    height:50%;
    display:table-cell; /*check this */
    vertical-align:middle; /**aligns where you want it */
    font-size:x-small;
    font-family:Verdana;
    font-weight:bold;
}

您可能也想查看此线程:Align multiple divs in one line and center text veticaly and horizontally