在两列中心放置图像

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

我不相信这是可能的。