代码之家 › 专栏 › 技术社区 › The Oddler

垂直对齐:中间对齐普通文本和

css html

The Oddler · 技术社区 · 7 年前

因此,我在表格中有一些带有链接的文本,我正在尝试垂直对齐:

* {
    vertical-align: middle;
}

<table>
  <tr>
    <td>
      Shoul be <a href="https://www.google.com">aligned</a> vertically
    </td>
    <td>
      <div>Multiple</div>
      <div>lines</div>
    </td>
    <td>
      <span>Could be </span><a href="https://www.google.com">aligned</a><span> with spans</span>
    </td>
  </tr>
</table>

但是正如您所看到的,第一个“对齐”与文本的其余部分不对齐(或者相反)。 span s、但是有没有一种方法可以不需要额外的费用呢 s

谢谢

2 回复 | 直到 7 年前

Mitya 7 年前

* 因为你会申请的 vertical-align 当你只需要它的时候 td 要素

td {
    vertical-align: middle;
}

<table>
  <tr>
    <td>
      Should be <a href="https://www.google.com">aligned</a> vertically
    </td>
    <td>
      <div>Multiple</div>
      <div>lines</div>
    </td>
    <td>
      <span>Could be </span><a href="https://www.google.com">aligned</a><span> with spans</span>
    </td>
  </tr>
</table>

问题是 a 具有 span A. 在文本中,您将从 baseline middle 这就产生了问题。

A. 而不是 跨度 您将遇到与第一个案例相同的问题,如下所示。

将鼠标悬停以注意边框将如何未对齐

td {
    vertical-align: middle;
}

span,a {
 border:1px solid;
}

table:hover a {
    vertical-align: middle;
}

<table>
  <tr>
    <td>
      Shoul be <a href="https://www.google.com">aligned</a> vertically
    </td>
    <td>
      <div>Multiple</div>
      <div>lines</div>
    </td>
    <td>
      <span>Could be </span><a href="https://www.google.com">aligned</a><span> with spans</span>
    </td>
  </tr>
</table>

marc_s MisterSmith 7 年前

应用 vertical-align 对任何和所有元素都没有任何意义,特别是因为许多元素会忽略它。在CSS渲染方面,它还会(至少在理论上)对性能产生负面影响。

相反,将其专门应用于 td s

td { vertical-align: middle; }

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前