在兩列中心放置圖像

Question

我正在用Twitter Bootstrap開發WordPress主題。 我們的目標是擁有一個帶有居中圖像的兩列頁面佈局，其中文本圍繞此圓形圖像浮動。

我的pseude元素的方法來自本教程：https://css-tricks.com/float-center/。問題是，我無法將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：

<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://jsfiddle.net/hLodr7n3/

Answer 1

我認爲，如果沒有添加必要的HTML元素在這個例子中概述：

https://alistapart.com/article/crosscolumn

我不相信這是可能的。