Alinear texto con imagen centrada

[chabri]

Buen dia! tengo una super duda y un problema existencial!

Debo crear esto:



El codigo del que dispongo es el siguiente:

Código HTML:

<div class="ds-1col node node-basic-page view-mode-full clearfix">
<img width="217" height="137" alt="" src="imagen.png">
<p>Wirtschaftsprüfungs- und Steuerberatungsgesellschaften gibt es viele, große wie kleine. Warum sollten sie sich für PKF Maack & Company entscheiden?</p>
<p>Weil wir Ihre leistungsfähige mittelständische Alternative unter den Wirtschaftsprüfungs- und Steuerberatungsgesellschaften sind. Wir verfügen in den Bereichen Finanzen, Wirtschaft und Steuern über umfangreiche Expertise. Gleichzeitig sind wir durch unsere Unternehmensgeschichte regional verwurzelt und Teil eines der großen globalen Netzwerke.</p>
<p>Trotz aller Größe sind wir mittelständisch geprägt. Das bedeutet: Wir kennen und verstehen Ihr Geschäft, weil wir denken und arbeiten wie Sie – direkt, schnörkellos, verlässlich und verantwortungsbewusst. Durch kurze Kommunikationswege und flache Hierarchien können wir schnell Entscheidungen treffen und flexibel agieren.</p>
</div> 

Como podria hacer para alinear de esta manera el texto con la imagen centrada...

He probado de todo, por eso acudo a vosotros, un saludo!

[pzin]

Pues sólo tendrías que flotar la imagen hacia el lado que quieras.

Código CSS:

img {
  float: left;
}
 

[chabri]

Eso ya lo he probado, me la alinea a la izquierda, esa es una opcion, pero yo lo que quiero es que este tal cual en la imagen que he facilitado, tener un texto sobre la imagen, otro a la derecha y uno en la parte inferior... Alguna otra idea? muchas gracias por responder!!

[pzin]

Lo dicho, flotas a la izquierda.

Arriba un párrafo, abajo otro, y en el medio otro párrafo y justo antes la imagen flotando a la izquierda.

[chabri]

jejeje! no puedo hacer lo que tu me dices, eso ya lo hice, pero te explico.

Es drupal, entonces el cliente debe subir una imagen que seria el titulo, y en un "body" el texto; el texto tiene que ir en una misma columna o contenido...

Me tiene de los nervios!!

Edito:

Como veo que eres moderador, me gustaria editar el primer comentario de este post, debido a que no me di cuenta y puse el nombre y web de la empresa, no quiero que se indexe, Muchas gracias!

[pzin]

Supongo que el problema será que el párrafo que viene después del párrafo que viene después del párrafo de la imagen, es decir, el último, sigue flotando a la izquierda, ¿no? Entonces sólo tendrías que limpiar el flotado con clear: left.

Algo así te valdría:

Código CSS:

img {
    float: left;
}
 
img + p + p {
    clear: left;
}
 

Ejemplo: http://jsfiddle.net/6BVaF

[chabri]

exacto, pero no puedo poner la imagen entre medio de los parrafos, lo unico que puedo hacer es poner la imagen al inicio o al final del texto :(

[pzin]

Vamos a ver... ¿La imagen la quieres centrada? ¿A la izquierda? ¿Al principio? Porque si lees tus mensajes y la imagen, has dicho que quieres esas tres cosas...

[chabri]

Me referia al codigo HTML,

Lo quiero hacer es lo que puse en el primer post, lo de la imagen, y el codigo HTML es el que facilite, la unica variente del codigo HTML es poner la etiqueta IMG al principio o al final...

[pzin]

Ahora si se entiende.

Pues con CSS no te será posible luego posicionarlo como quieres. Básicamente porque el texto no tendrá siempre el mismo largo ni la imagen supongo que tampoco.

Tendrías que usar JavaScript, o encontrar la forma de poner esa imagen en el lugar que quieras, que sería lo ideal.

[chabri]

Exacto :( perdon por explicarme mal... me falta ese don jeje

con lo facil que parece y lo complicado que se hace... muchas gracias! probare algo de javaScript a ver que puedo hacer!