1
Je développe un thème WordPress avec Twitter Bootstrap. L'objectif est d'avoir une mise en page à deux colonnes avec une image centrée, où le texte flotte autour de cette image ronde.Placez l'image au centre de deux colonnes
Mon approche avec les éléments pseude provient de ce tutoriel: https://css-tricks.com/float-center/. Le problème est que je ne suis pas capable de centrer les éléments pseude verticalement.
Au cours de mes recherches, je également trouvé ce fil Centering an image in a paragraph mais je ne sais pas si je peux l'utiliser, parce que le texte (qui dans mon cas viendra de wordpress) est interrompue par une période -> pas facile à utiliser.
CSS:
.picture { position: absolute; left: 50%; margin-left: -100px; height:200px;}
.text-left, .text-right { width: 49%; text-align: justify;}
.text-left { float: left; }
.text-right { float: right; }
.text-left:before, .text-right:before { content: ""; top:200px; width: 100px; height: 200px; }
.text-left:before { float: right; shape-outside: circle(50%); top:20%;}
.text-right:before { float: left; shape-outside: circle(50%); top:20%;}
HTML:
<div class="container">
<br><br><br>
<img src="https://s30.postimg.org/ksdpa4em9/rund.png" alt="Image" class="picture">
<div class="text-left">
<p class="lead element">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
</div>
<div class="text-right">
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
</div>
</div>
<!-- /.container -->
S'il vous plaît voir le violon: https://jsfiddle.net/hLodr7n3/
Je ne vois pas le problème de votre lien de violon ... – Ryan
Je ne suis pas en mesure de centrer l'image verticalement. Il devrait être au milieu de la page – Bruce
Tout d'abord, que voulez-vous dire par votre déclaration "... le texte (qui dans mon cas viendra de wordpress) est interrompu par un span -> pas convivial ..."? Est-ce le contenu final exact qui peuplera la page? Deuxièmement, la forme va-t-elle toujours faire partie de la mise en page, et sera-t-elle toujours un cercle généré par CSS (sera-t-il une image ou quelque chose qui changera de page en page)? Troisièmement, est-ce que ce sera un design réactif? – Ryan