イメージを2列の中央に配置する

Question

私はTwitter BootstrapでWordPressテーマを開発しています。 目指すのは、このラウンドイメージの周りにテキストが浮かんでいる中央のイメージを持つ2列のページレイアウトです。

pseude要素の私のアプローチは、このチュートリアルから得られます。。問題は、pseude要素を垂直に中央に配置できないことです。

私の研究では、このスレッドも見つかりましたCentering an image in a paragraphしかし、私の場合はWordPressから来るテキストがスパンで割り込まれているので、私はこれを使うことができるのかどうかはわかりません。

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：

：この例で説明したように必要なHTML要素を追加することなく、https://jsfiddle.net/hLodr7n3/

Answer 1

私は思う：

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

がフィドルを参照してください。 https://alistapart.com/article/crosscolumn

私はそれが可能であるとは思わない。