将图层内容放在中心

Question

我想以这种方式使用div图层放置文本：

我试过了：

<div style="display: table; margin: 0 auto; padding-bottom: 15px;">
    <!-- mail layer with centered content -->main text
</div>



<div style="position: relative; float:right; padding-left: 15px;">
     <!-- second layer with right content -->left text
</div>

<div style="position: relative; float:right; padding-left: 15px; padding-top: 2px;">
<!-- mail layer with right content -->left text
</div>

但文字不像图片那样放置。有没有更好的解决方案？

Answer 1

这取决于您的文字在变长时的行为方式。

1. 您可以将中心文字放在absolute位置，如下所示：https://jsfiddle.net/jh43ezek/
2. 或者将左侧项目放在absolute位置https://jsfiddle.net/jh43ezek/1/
中的div中

希望这会有所帮助！

Answer 2

这样做怎么样？ https://jsfiddle.net/DIRTY_SMITH/eu6x72zf/2/

HTML

<div class="wrapper">
<div class="div3">
<!-- mail layer with right content -->left text
</div>
<div class="div2">
     <!-- second layer with right content -->left text
</div>
<div class="div1">
    <!-- mail layer with centered content -->main text
</div>
</div>

的CSS

body{margin: 0;}
.wrapper{width: 100%; background-color: yellow}
.div1{ width: 100px; margin: 0 auto; display: block; padding-bottom: 15px;}
.div2, .div3{float:right; padding-left: 15px;}