图像样式 | XXXXXXXXXXXXXXXXX

本文介绍了图像样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述您好，我希望旁边有一个带有文字的大图片。这个文本应该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 解决方案文章 < 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. Thistext should a) be vertically centered and b) stay *next* to the imageeven when it''s multiple line.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX This is my text thatXXXXXXXXXXXXXXXXX spans across severalXXXXXXXXXXXXXXXXX linesXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX So far, when I give the img the vertical-align:middle attribute, itworks, but only the first line of text stays where it belongs: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX This is my text thatXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXthat spans across several linesCould 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. Thistext should a) be vertically centered and b) stay *next* to the imageeven when it''s multiple line.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX This is my text thatXXXXXXXXXXXXXXXXX spans across severalXXXXXXXXXXXXXXXXX linesXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXSo far, when I give the img the vertical-align:middle attribute, itworks, 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 itis not quite middle... --doraymeOn 2006-10-19, Alexander Fischer <ha***********@hotmail.comwrote:Hello,I would like to have a large image with text right next to it. Thistext should a) be vertically centered and b) stay *next* to the imageeven when it''s multiple line.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX This is my text thatXXXXXXXXXXXXXXXXX spans across severalXXXXXXXXXXXXXXXXX linesXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXSo far, when I give the img the vertical-align:middle attribute, itworks, but only the first line of text stays where it belongs:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX This is my text thatXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXthat spans across several linesThis is the correct behaviour-- the image sits in the text as though itwere 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 positioneddiv 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: middleproperty 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 hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text hereA few lines of text here</td></tr></table></body> For the purists, you can of course do this with display: table-cell anddisplay: 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 itis not quite middle...A padding-top:30px for the <pdoesn''t seem like a particularlygood solution, for a number of reasons. The caption also gets cutoff (with no horizontal scrollbar) if the browser window isn''t wideenough... hopefully, there''s a better solution! 这篇关于图像样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！