文章/答案/技术大牛

发布

社区首页 >问答首页 >垂直对齐文本和浮动右元素的文本

问垂直对齐文本和浮动右元素的文本
EN

Stack Overflow用户

提问于 2019-12-09 19:56:10

回答 2查看 51关注 0票数 0

我有一个非常简单的表，我想垂直对齐两个元素的文本，其中一个是纯文本，另一个是按钮(我已经将它们放在span标记中，因为我一直在尝试不同的东西)，所以现在的代码片段如下所示：

<tr>
   <td>element</td>
   <td>
      <span> test </span>
      <span>
           <button class="btn btn-danger pull-right">Delete</button>
      </span>
   </td>
</tr>

和

th, tr, td{
  vertical-align: middle !important;
}

不幸的是，无论我怎么尝试，只要我使用pull-right类，它看起来就像这样：

"test“元素不会居中对齐，也不会与按钮的"Delete”文本对齐。如有任何建议，我们将不胜感激！

html

css

alignment

回答 2

Stack Overflow用户

发布于 2019-12-09 20:08:41

删除pull-right类并尝试执行以下操作：

<tr>
   <td>element</td>
   <td class="d-flex align-items-center justify-content-between">
      <span> test </span>
      <span>
           <button class="btn btn-danger">Delete</button>
      </span>
   </td>
</tr>

票数 0

Stack Overflow用户

发布于 2019-12-09 20:12:54

试试这个：

span.test{
    line-height: 35px;
}
th, td {
  border: 1px solid black;
}

<tr>
   <td>element</td>
   <td>
      <span class="float-left test"> test </span>
      <span class="float-right">
           <button class="btn btn-danger pull-right">Delete</button>
      </span>
   </td>
</tr>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59248432

复制

相似问题

问垂直对齐文本和浮动右元素的文本
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐文本和浮动右元素的文本EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐文本和浮动右元素的文本
EN