Question

我正在使用Twitter Bootstrap开发WordPress主题。目标是使用具有居中图像的双列页面布局，其中文本浮动在该圆形图像周围。

我对pseude元素的处理方法来自本教程：https://css-tricks.com/float-center/。问题是，我无法垂直地将pseude元素集中在一起。

在我的研究过程中，我也找到了这个帖子Centering an image in a paragraph，但我不确定我是否可以使用它，因为文本（在我的情况下将来自wordpress）被跨度中断 - ＆gt;用户不友好。

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

我不相信这是可能的。

将图像放在两列的中心

1 个答案: