图像样式 [英] Image styling
问题描述
您好，
我希望旁边有一个带有文字的大图片。这个
文本应该a）垂直居中并且b）保持*下一个*到图像
，即使它是多行。
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX跨越几个
XXXXXXXXXXXXXXXXX线
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
到目前为止，当我给img指定vertical-align：middle属性时，
有效，但是只有第一行文字保留在它所属的位置：
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXX XXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
跨越多行
你能不能给我一个如何实现的提示想要的结果？
谢谢，
Alex
< blockquote>文章
< 11 ********************* @ f16g2000cwb.googlegroups。 com>，
" Alexander Fischer" < ha *********** @ hotmail.comwrote：
你好，
我我希望在它旁边有一个带有文字的大图像。这个
文本应该a）垂直居中并且b）保持*下一个*到图像
，即使它是多行。
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX跨越几个
XXXXXXXXXXXXXXXXX线
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
到目前为止，当我给img的vertical-align：middle属性时，它是
有效，但只有第一行文字保留在它所属的位置：
我猜一个提示是在 http://www.sn2.com.au/reports.html ...但是它
不是中等...
-
dorayme
2006-10 -19，Ale xander Fischer< ha *********** @ hotmail.comwrote：
你好，
我希望旁边有一个带有文字的大图像。这个
文本应该a）垂直居中并且b）保持*下一个*到图像
，即使它是多行。
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX跨越几个
XXXXXXXXXXXXXXXXX线
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
到目前为止，当我给img的vertical-align：middle属性时，它是
有效，但只有第一行文字保留在它所属的位置：
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXX XXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
跨越多行
这是正确的行为 - 图像位于文本中，好像它是一个单词，然后随之流动。
你能给出吗？我暗示如何达到预期的效果？
这里的难点是如何垂直居中。定位
div可以在其容器中居中，具有自动顶部和底部边距，
但仅在指定其高度时才有效。我们不能在这里指定高度，
因为我们不知道文本会占用多少行。
所以我认为桌子是最好的方式，而vertical-align：mid
属性正是我们想要的：
< head>
< style type =" text / css">
td
{
vertical-align：middle ; / *通常默认为* /
}
< / style>
< / head>
< body>
< table>
< tr>
< td>
< ; img src =" large-image.png">
< / td>
< td>
几行这里的文字
这里有几行文字
这里有几行文字
这里有几行文字
这里有几行文字
这里有几行文字
这里有几行文字
几行文字这里
这里有几行文字
这里有几行文字
这里有几行文字
< / td>
< / tr>
< / table>
< / body>
对于纯粹主义者，您当然可以使用display：table-cell和
display：table并保持HTML清除布局信息。
文章
< do ********************************** @ news-vip.optusnet.com.au> ;，
dorayme< do ************ @ optusnet.com.auwrote：
In文章
< 11 ********************* @ f16g2000cwb.googlegroups。 com>，
" Alexander Fischer" < ha *********** @ hotmail.comwrote：
你好，
我我希望在它旁边有一个带有文字的大图像。这个
文本应该a）垂直居中并且b）保持*下一个*到图像
，即使它是多行。
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX这是我的文字
XXXXXXXXXXXXXXXXX跨越几个
XXXXXXXXXXXXXXXXX线
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
到目前为止，当我给img指定vertical-align：middle属性时，
有效，但是只有第一行文字保留在它所属的位置：
我猜一个提示是在 http://www.sn2.com.au/reports.html ...但是它
不是中等...
填充顶部：< pdoesn''ts的30px出于多种原因，eem就像一个特别好的解决方案。如果浏览器窗口不宽，那么标题也会被切断
关闭（没有水平滚动条）
足够...希望，这是一个更好的解决方案！
Hello,
I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it''s multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
that spans across several lines
Could you give me a hint about how to achieve the desired result?
Thanks,
Alex
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
Hello,
I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it''s multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:
I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...
--
dorayme
On 2006-10-19, Alexander Fischer <ha***********@hotmail.comwrote:Hello,
I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it''s multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
that spans across several linesThis is the correct behaviour-- the image sits in the text as though it
were a word, and flows with it.
Could you give me a hint about how to achieve the desired result?The hard part here is how to centre the text vertically. A positioned
div can be centered in its container with auto top and bottom margins,
but only if its height is specified. We can''t specify the height here,
because we don''t know how many lines the text is going to take up.
So I think a table is the best way to go, and the vertical-align: middle
property does just what we want:
<head>
<style type="text/css">
td
{
vertical-align: middle; /* usually the default anyway */
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="large-image.png">
</td>
<td>
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
A few lines of text here
</td>
</tr>
</table>
</body>
For the purists, you can of course do this with display: table-cell and
display: table and keep your HTML clean of layout information.
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article
<11*********************@f16g2000cwb.googlegroups. com>,
"Alexander Fischer" <ha***********@hotmail.comwrote:
Hello,
I would like to have a large image with text right next to it. This
text should a) be vertically centered and b) stay *next* to the image
even when it''s multiple line.
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX This is my text that
XXXXXXXXXXXXXXXXX spans across several
XXXXXXXXXXXXXXXXX lines
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
So far, when I give the img the vertical-align:middle attribute, it
works, but only the first line of text stays where it belongs:
I guess a hint is at http://www.sn2.com.au/reports.html... but it
is not quite middle...A padding-top:30px for the <pdoesn''t seem like a particularly
good solution, for a number of reasons. The caption also gets cut
off (with no horizontal scrollbar) if the browser window isn''t wide
enough... hopefully, there''s a better solution!
这篇关于图像样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
