我们怎样才能让文本“Create New Position”垂直居中?
HTML/CSS 如下。
将 margin-top:5px
添加到“Create new..”div 会有所帮助,但看起来很老套。
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
最佳答案
以下内容将基于创建一个对两个元素都相等的行高来工作。
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
诀窍是将包含 DIV
的 .row
设置为 24px
高,同时设置包含的 SPAN
元素的 line-height
为 24px
。通过这样做,您可以告诉浏览器该行文本占用多少垂直空间。
但是请注意,24px
不是重要的部分 - 重要的部分是确定您的 button
有多高,这取决于您的 CSS 和您选择的字体对于按钮本身。
在这种情况下,我给你的例子垂直居中的原因是基于我放在顶部的 EXAMPLE ONLY
CSS - 它说字体大小应该是 12px
。默认的浏览器大小(至少在 Chrome 中)将在按钮周围提供一些额外的边距和填充,以及一个边框 - 这导致总高度大约为 24px
,这外观:
边框也是由示例 CSS 创建的,只是为了向您展示垂直对齐是正确的。一旦你删除 .row { border: 1px solid #ccc; }
,它将消失。
这是一个显示它工作的 JSBin:
关于css - 在同一行上垂直居中两个 div 之一?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4147575/