文字定位问题（垂直对齐） [英] Text Positioning Problem (Vertical align)

问题描述

你好，


我最近遇到了一个问题，我认为很容易解决......但结果我不知道如何解决它） ））


我的网站上有这样的文字显示（从顶部开始）：

http://bytes.com/attachments/attachm...align_prob.jpg


但是我需要它看起来像这样（在中间）：

http://bytes.com/attachment.php?atta...1&d=1311513562


文字和图片（Green Tick）两者都在同一个div中，如何对齐文本，使其垂直位于中间？我尝试了这个，但它没有用：

Hello,

I''ve recently came over a problem, which I thought was easy to solve... but turned out that I have no idea how to fix it )))

I have text displaying like this on my website (Starts from Top):

http://bytes.com/attachments/attachm...align_prob.jpg

But I need it to look like this (in the Middle):

http://bytes.com/attachment.php?atta...1&d=1311513562

Text And image (Green Tick) are both in same div, How can I align text so it is vertically in the middle? I tried this, but it didn''t work:

展开 | 选择 | Wrap | 行号

推荐答案

do你有在线页面？ （因为那时我可以把我的Firebug扔到它上面看看，它应用了什么CSS）

do you have the page online? (because then I can throw my Firebug at it and see, what CSS is applied to it)

是的，你可以在 http://inelmo.com ，仍然在发展，可能会令人困惑）））

yeh, you can see it at http://inelmo.com , still developing so might be confusing )))

你的文字确实是对齐的中间（参考），就是这样你错误地假设中间位置是什么。


第一个问题：< input>元素浮动。浮动元素从其父元素的流（以及高度计算）中取出，因此文本的高度将采用默认高度（CSS中定义的15px与< input>的25px）


第二个问题：vertical-align是在行框而不是块框上计算的。


如果取出浮动属性，重新排列< input> s（它们之间没有空格< input ...>< input ...> ）并更正填充，你会得到文本和< input>在中间对齐（测试）。

your text is indeed aligned in the middle (ref.), it’s just that you have the wrong assumption of where that middle is.

first problem: the <input> elements are floated. floated elements are taken out of the flow (and thus the height calculation) of their parent elements, thus the height of the text will take the default height (15px as defined in the CSS vs. 25px of the <input>)

second problem: vertical-align is calculated on the line-box, not the block-box.

if you take out the float property, rearrange the <input>s (no whitespace between them <input …><input …>) and correct the paddings, you’ll get the text and the <input>s aligned in the middle (tested).

这篇关于文字定位问题（垂直对齐）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！