positioning images in a text element

Hi there,

Currently there are four ways to position an image in a text element: above, left, right or below. When you choose left or right, actually the image is positioned top-left or top-right (first screenshot).

Is there a way to define a more subtle position of the image? For example left-middle or bottom-right. Even better would be the possibility to position the image a defined number of pixels or lines of text below the top of the text element (second screenshot).

Is there a way to do this in CSS? Relative positioning doesn't seem to do the trick.

Thanks in advance!

Just

As far as I know there is no CSS solution for this to achieve.

Only way is to place your image right into the paragraph.

HTML Code:

---

<p>Some text <img class="float_left"...> some more Text.</p>

---

You can try to do this dynamicaly with JS. Split the text and inject the image in between.

Found a solution.

Place a div class="spacer" below the headline above the figure. (Do this with JS or with a template modification.)

HTML Code:

---

<div id="text" class="ce_text block">
  <h2>Text</h2>
  <div class="spacer"></div>
  <figure class="image_container float_left">
    <img>
    <figcaption></figcaption>
  </figure>
  <p></p>
  <p></p>
</div>

---

Add this CSS

PHP Code:

---

.spacer {
  float: left;
  height: 4em; /* adjust distance from top */
}
figure {
  clear: both;
} 


---

In future there will be an easier way. Search for CSS exclusion or wrap-flow.