positioning images in a text element

[justs]

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

[Andreas]

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.

<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.

[Andreas]

Found a solution.

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

<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

.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.