为啥是垂直对齐：文本顶部；不能在 CSS 中工作

Posted 2023-03-05

【中文标题】为啥是垂直对齐：文本顶部；不能在 CSS 中工作

【英文标题】：Why is vertical-align:text-top; not working in CSS为什么是垂直对齐：文本顶部；不能在 CSS 中工作

【发布时间】：2010-10-29 18:50:46

【问题描述】：

我想将一些文本对齐到 div 的顶部。似乎vertical-align: text-top; 应该可以解决问题，但它不起作用。我所做的其他事情，例如将 div 放入列中并显示虚线边框（这样我可以看到 div 的顶部在哪里）都可以正常工作。

#header_p  
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;

#header_selecttxt 
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;

#header_div_left  
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;

#header_div_right  
    margin-left: 50%;
    width: 50%;
    border: dashed;

【参考方案1】：

position:absolute;
top:0px; 
margin:5px;

解决了我的问题。

【参考方案2】：

以上所有对我都不起作用，我刚刚检查了这个及其工作：

垂直对齐：超级；

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

我知道填充或边距会起作用，但这是我更喜欢的最后选择。

【讨论】：

不知道为什么，但<span> 比<p> 或<h6> 做得更好

【参考方案3】：

您可以使用上下文选择器并将垂直对齐移动到那里。那么，这将与 p 标签一起使用。下面以这个sn-p为例。类中的任何 p 标签都将尊重垂直对齐控件：

#header_selecttxt 
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;


#header_selecttxt p 
    vertical-align: text-top;

您还可以在两个部分中保持垂直对齐，以便其他内联元素使用它。

【参考方案4】：

您可以使用 margin-top: -50% 将文本一直移动到 div 的顶部。

margin-top: -50%;

【参考方案5】：

类似

  position:relative;
  top:-5px;

就在内联元素本身对我有用。 必须使用顶部才能使其垂直居中...

【参考方案6】：

vertical-align 只适用于呈现为inline 的元素。 <span> 默认呈现为内联，但并非所有元素都是。默认情况下，段落块元素<p> 呈现为块。表格渲染类型（例如table-cell）也允许您使用垂直对齐。

某些浏览器可能允许您在段落块等项目上使用vertical-align CSS 属性，但它们不应该这样做。以段落表示的文本应填充书面语言内容，否则标记不正确，应使用许多其他选项之一。

我希望这会有所帮助！

【参考方案7】：

vertical-align 属性仅适用于内联元素。它不会影响块级元素，例如 div。同样 text-top 仅将文本移动到当前字体大小的顶部。如果您想将内联元素垂直对齐到顶部，请使用它。

vertical-align: top;

段落标签没有过期。此外，应用于 span 元素的 vertical-align 属性在某些 mozilla 浏览器中可能无法按预期显示。

【讨论】：

对我不起作用。文本始终垂直居中对齐:(

【参考方案8】：

您可以将position: relative; 应用于 div，然后将position: absolute; top: 0; 应用于其中包含文本的段落或跨度。

【参考方案9】：

从我提供的信息中无法解决我遇到的问题：

我将文本包含在 old school <p> 标签中。

我将<p> 更改为<span>，它工作正常。

【讨论】：

我的网络经验有限，但是每当我尝试原始 并且只使用表格来显示信息时，我发现很难将所有内容保留在“包装器” 中。很少用表格来做到这一点，如果单元格中有东西，它通常不会弹出！ 关键的区别在于使用 block 标签 <p> 与内联标签 <span>。 将显示设置为内联块，然后只有您的垂直对齐才能在您的情况下工作。