文本块内的图像（CSS） [英] Image inside text block (CSS)

问题描述

有人可以帮助我在CSS中的一个小窍门？我需要在文本块（< p>>）中放置图片（< a>< img />< / a> ;< / p> ）像上面的图片：

像@StephanMuller说的那样，这是不可能的，我正在寻找一个不存在的float：center，但是我可以解决一些float：left，right！再次感谢所有人，抱歉不太清楚，请不要低估我！已解决：）

解决方案

简单的html / css构造是不可能的。你正在寻找 float：center -like的行为，这很不幸并不存在。

这里的主要问题是，文本中的图像是每个定义的内联（或内嵌块）元素（如果将它设置为块，则会打断文本的流动）。这转而意味着其他文本行不知道图像的位置。 float 是为解决这个问题而设计的，但它只能在某些东西的左侧和右侧工作，而不是在中间。

我能得到的最接近的是： http://jsfiddle.net/5HPMq/

正如您所看到的，我对一些高度进行了硬编码，以便能够轻松地在图像上设置正确的负边距。这样图像的高度不会影响其余行的行高，但正如我所说其他行不知道图像在哪里，所以它们会在它后面流动。

TL; DR：抱歉，您无法这样做。

添加

我假设您希望文字在领带图像周围流动。如果您只想将图像重叠在上面和下面的线上，请使用我的jsfiddle并查看您是否可以在那里工作。

can someone help me with a little trick in css? I need to put an image (<a><img/></a>) inside a text block (<p></p>) like the image above:

Like @StephanMuller said, that's not possible, i was looking for a float:center, that doesn't exist, but i can work around with some float:left, and right! Thanks again everybody, sorry for not been so clear, please don't downvote me ! SOLVED :)

解决方案

This is not possible with a simple html/css construction. You're looking for float:center-like behavior, which unfortunately doesn't exist.

The main problem here is that images inside text are inline (or inline-block) elements per definition (if you make it a block it breaks up the flow of the text). This in it's turn means that other lines of text are not aware of where the image is. float was deviced to solve this, but it only works on the left and right side of something, not in the middle.

The closest I could get was this: http://jsfiddle.net/5HPMq/

As you can see, I hardcoded some heights to be able to easily set the right negative margins on the images. This way the height of the image doesn't influence the line-height of the rest of the line, but as I stated the other lines are not aware of where the image is, so they will flow behind it.

TL;DR: Sorry, you can't do this.

addition

I was assuming you want the text to flow around tie image. If you merely want to overlap the images on the lines above and below it, use my jsfiddle and see if you can work from there.

这篇关于文本块内的图像（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！