如何让我的<p>元素在<input />和<textarea>字段旁边垂直居中?</textarea> </p>

时间:2010-08-13 15:08:38

标签: html css center vertical-alignment

我无法将pinputtextarea元素全部置于我正在处理的用户设置区域中的li元素中。现在,只有inputtextarea元素在li元素中正确居中,而p元素位于顶部。我试过申请

vertical-align: middle

li元素,但失败了。

我的example code link is here at JS Bin

为了帮助指导您查看我的示例,每个元素的背景颜色如下:

  • p = red
  • li =青色
  • input&amp; textarea = white

如何将pinputtextarea元素全部置于li元素中?

1 个答案:

答案 0 :(得分:1)

我了解到Twitter和Facebook等网站使用以下HTML元素创建设置页面:

  • TBODY
  • TR
  • TD
  • 标签

所以我决定遵循这个标准做法和this is what I came up with。 CSS样式不存在,但您可以看到table元素及其子元素提供的基本实体结构。请注意table tbody tr th label名称如何自动定位在其包含的表格单元格的中心。如果我需要将它们定位到顶部,底部或基线而不是我需要做的就是将vertical-align添加到label的父元素th

This is the result of adding vertical-align: top; styling to the th element in the same row as the textarea.

如果我想将label元素水平放置在表格单元格中,那么我需要做的就是使用text-align元素上的th选择器并预先设置。

This is the result of adding text-align: right; to the 2nd th in the 2nd tr and the 3rd and 4th tr th elements.