DIV中文本的垂直对齐 [英] Vertical alignment of text within a DIV
问题描述
很抱歉，如果这是一个愚蠢的问题，请购买我的CSS非常糟糕...但是怎么做
我将文本垂直居中在div标签内？这是我的代码
以下......文本显示在最右上方。我想要它
最右边垂直居中。
#test
{
宽度： 100％;
身高：55px;
保证金：0 0 0 0;
填充：0 0 0 0;
border：solid＃3366CC;
border-width：1px 0 0 0;
text-align：right;
font-尺寸：14px;
字体重量：粗体;
颜色：#ffffff;
}
< div id =" test">希望此文字垂直居中< / div>
Sorry if this is a dumb question buy my CSS is pretty bad... but how do
I get text to center vertically within a div tag? Here''s my code
below... the text is displaying on the far top-right. I would like it
far right centered vertically.
#test
{
width: 100%;
height: 55px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
<div id="test">would like this text centered vertically</div>
推荐答案
~john写道：
~john wrote:
对不起如果这是一个愚蠢的问题买我的CSS很糟糕......但是怎么做
我得到文字到中心在div标签内垂直？
Sorry if this is a dumb question buy my CSS is pretty bad... but how do
I get text to center vertically within a div tag?
你不是真的，至少与表格单元中的方式不同。
You don''t really, at least not in the same way as in a table cell.
这是'我的代码
以下...文本显示在最右上角。我想要它
最右边垂直居中。
#test
{
宽度： 100％;
身高：55px;
保证金：0 0 0 0;
填充：0 0 0 0;
border：solid＃3366CC;
border-width：1px 0 0 0;
text-align：right;
font-尺寸：14px;
字体重量：粗体;
颜色：#ffffff;
}
< div id =" test">希望此文字垂直居中< / div>
Here''s my code
below... the text is displaying on the far top-right. I would like it
far right centered vertically.
#test
{
width: 100%;
height: 55px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
<div id="test">would like this text centered vertically</div>
添加一个< paround该div中的文本，并给它一个上边距。
它将始终保持在该水平，无论文本
包装还是字体大小调整。是的，文本将可以调整大小，在IE浏览器以外的其他浏览器中 - 应该如此。为IE用户提供相同的
福利，请不要在px中设置字体大小，而是使用％或em。
-
Els http://locusmeus.com/
无障碍网页设计： http://locusoptimus.com/
正在播放：Camel - Lady Fantasy（Bonus track）
Add a <paround the text inside that div, and give it a top margin.
It will always stay at that level though, regardless of the text
wrapping or font resizing. Yes, the text will be resizable, in any
other browser than IE - as it should. To give IE users the same
benefits, please don''t set a font-size in px, but use % or em.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Camel - Lady Fantasy (Bonus track)
谢谢
Els写道：
thanks
Els wrote:
~john写道：
~john wrote:
对不起如果这是一个愚蠢的问题买我的CSS很漂亮糟糕......但是怎么做
我得到文本在div标签内垂直居中？
Sorry if this is a dumb question buy my CSS is pretty bad... but how do
I get text to center vertically within a div tag?
你不是真的，至少与表格单元中的方式不同。
You don''t really, at least not in the same way as in a table cell.
这是'我的代码
以下...文本显示在最右上角。我想要它
最右边垂直居中。
#test
{
宽度： 100％;
身高：55px;
保证金：0 0 0 0;
填充：0 0 0 0;
border：solid＃3366CC;
border-width：1px 0 0 0;
text-align：right;
font-尺寸：14px;
字体重量：粗体;
颜色：#ffffff;
}
< div id =" test">希望此文字垂直居中< / div>
Here''s my code
below... the text is displaying on the far top-right. I would like it
far right centered vertically.
#test
{
width: 100%;
height: 55px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
<div id="test">would like this text centered vertically</div>
添加一个< paround该div中的文本，并给它一个上边距。
它将始终保持在该水平，无论文本
包装还是字体大小调整。是的，文本将可以调整大小，在IE浏览器以外的其他浏览器中 - 应该如此。为IE用户提供相同的
福利，请不要在px中设置字体大小，而是使用％或em。
-
Els http://locusmeus.com/
无障碍网页设计： http://locusoptimus.com/
正在播放：Camel - Lady Fantasy（Bonus track）
Add a <paround the text inside that div, and give it a top margin.
It will always stay at that level though, regardless of the text
wrapping or font resizing. Yes, the text will be resizable, in any
other browser than IE - as it should. To give IE users the same
benefits, please don''t set a font-size in px, but use % or em.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Camel - Lady Fantasy (Bonus track)
Els写道：
Els wrote:
~john写道：
~john wrote:
>对不起，如果这是一个愚蠢的问题买我的CSS很糟糕......但是怎么做
我在div标签中将文本垂直居中？
>Sorry if this is a dumb question buy my CSS is pretty bad... but how
do I get text to center vertically within a div tag?
你不是真的，至少与表格单元中的方式不同。
You don''t really, at least not in the same way as in a table cell.
>这是我的代码
下面......文字显示在最右上角。我希望它能够垂直居中。
{
宽度：100％;
高度：55px;
边距：0 0 0 0;
填充：0 0 0 0;
border：solid＃3366CC;
border-width：1px 0 0 0;
text-align：right;
font-size：14px;
font-weight：bold;
颜色：#ffffff;
}
< div id =" test" ;>希望此文字垂直居中< / div>
>Here''s my code
below... the text is displaying on the far top-right. I would like it
far right centered vertically.
#test
{
width: 100%;
height: 55px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
<div id="test">would like this text centered vertically</div>
添加一个< paround该div中的文本，并给它一个上边距。
它将始终保持在该水平，无论文本
包装还是字体大小调整。是的，文本将可以调整大小，在IE浏览器以外的其他浏览器中 - 应该如此。为IE用户提供相同的
福利，请不要在px中设置字体大小，而是使用％或em。
Add a <paround the text inside that div, and give it a top margin.
It will always stay at that level though, regardless of the text
wrapping or font resizing. Yes, the text will be resizable, in any
other browser than IE - as it should. To give IE users the same
benefits, please don''t set a font-size in px, but use % or em.
实际上这是CSS的主要缺点，因为我会继续看到更多的b
更多的jsut案例会让生活变得困难，痛苦的是什么
shoudl是基本的东西。就像相等的柱高一样。并且适当的
多列布局困境。
说真的，我无法理解CSS的发明者（至少
的位置）一部分; CSS的格式化部分根本不是一个问题，并且
工作得很好）无法直接向前发展。难道它真的有这么可怕吗：对齐垂直，
对齐水平，以及适当的高度控制（注意如何100％高度
DIV内部的DIV有时会超出外部div的范围，
当规范CLEARLY指出CONTAINING DIV的高度％应该是
这种奇怪的感觉实际上是任何CSS支持的浏览器
我已经测试过了（Moz，FF，IE，Opera ......）
我'对不起，但CSS似乎还没有成熟。不要给我
错了，CSS在很多方面都是三角形，但在布局方面，
任何先进的东西（或许多东西都很容易用，喘气，桌子）它只是看起来很缺乏。至少，它让很多事情变得简单
（具有可以轻松重复使用的样式）但同时它会使得很多东西比他们应该更难，甚至接近
不可能没有一些狂野或奇怪的hackery。 （请记住，我不认为
意味着跨浏览器黑客攻击。）
Actually this is a major short coming to CSS, as I jsut keep seeing more
and more cases of it jsut makes life difficult and painful for what
shoudl be basic things. Just like the "equal column height" and proper
multi column layout dilemas.
Seriously, I cannot fathum how the inventors of CSS (at least the
position part; the formating parts of CSS are not a prolbem at all and
work great) could not of made it straight foward. Would it really have
been so horrible to having something like align-vertical,
align-horizontal, and proper height control (notice how 100% heights on
DIVs inside DIVs sometimes push out of the confines of the outer div,
when the spec CLEARLY states the height % should of the CONTAINING DIV''s
space. This strangeness happens is virtually any CSS supporting browser
I''ve tested (Moz, FF, IE, Opera...)
I''m sorry, but it really seems CSS has not yet come of age. don''t get me
wrong, CSS is a triuth in many areas, but in the area of layouts,
anything advanced (or many things easily doable with, gasp, tables) it
just seems so lacking. At the very least, it makes many things easy
(having styles that can be easily reused) but at the same time it makes
many thing a heck of a lot harder than they should be, or even near
impossible without some wild or strange hackery. (Keep in mind I don''t
mean cross browsers hacks.)
这篇关于DIV中文本的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
