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来理解单行文本的垂直对齐。

＆GT; 其他一些CSS疑惑＆gt;＆gt; 1.更改屏幕分辨率时，包含单行文本的div内的文本框也会退出控件。我可以做些什么来解决这个问题？我将在一个按钮中控制它

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

Answer 2

您可以使用top: 50%并添加一个负上边距（等于线高度的一半），将span元素垂直放置在中间位置。

你走了：

<强> EXAMPLE HERE

span {
  position:absolute;
  top: 50%; left:0;

  font-size: 0.7em; 
  line-height: 100%;  /* 100% of font-size */

  margin-top: -0.35em;
}

但是，如果您不想使用绝对定位，则可以按照 this approach 进行操作。

注意：我对table-cell s没有任何建议，除了the effect relative positioning is undefined这些类型的元素。如果您不介意，也可以按照@NoobEditor的解决方案。

无论屏幕分辨率不起作用，都将文本垂直对齐跨度/标签中间

2 个答案: