Question

我想将一个段落和一个图像放在一起，让它们都居中。这是我尝试做的一个例子。向下滚动一下看。

http://shibori-demo.squarespace.com/how-shibori-works-shibori/

我可以让这个工作，但这一切都被压到了左边视。什么是获得这种效果的最佳方式？

Answer 1

您提供的示例使用了flex属性。简而言之，您可以通过将元素放在带有display：flex。

的div容器中来完成任务

<div class="container">
  <p class="inner">text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. Text text text, texty texty text. 
  </p>
  <img src="http://placehold.it/200x350"/>
</div>

css很简单：

 .container {
      display: flex;
    }

以下是flex的完整指南和display属性的文档。

之后，将宽度更改为您需要的宽度并将其居中。

.container {
  display: flex;
  width: 80%;
  margin: 0 auto;
}

Answer 2

的DIV。很多div。

首先，外部div是width:100%并且是text-align:center

然后，一个包装div将两个项目放入。它应该被设置为overflow:hidden样式，以便内部div（使用float设置样式）具有高度。

最后，围绕每个项目的div为他们提供自己的框，并将每个样式设为float:left

div {position:relative;box-sizing:border-box;}
.wrapper{width:100%;border:1px solid orange;}
  .innerwrap{width:100%;overflow:hidden;}
    .boxes{float:left;width:50%;padding:10px;}
    .leftBox {}
    .rightBox{}

<div class="wrapper">
  <div class="innerwrap">
    <div class="boxes leftBox">
      <img src="http://placekitten.com/230/300" />
    </div>
    <div class="boxes rightBox">
      <p>Ad vidit contentiones consequuntur sea, quod eripuit assentior an nec. Cu errem eruditi est, quando everti duo eu. Eum consul noster vocent ex, at ius viris aeterno omittam. His nonumy lobortis convenire ei. Sea eu justo choro qualisque. Dolore pertinax accommodare quo et, per ad debet delenit splendide. Voluptua sapientem id eos.</p>
    </div>
  </div>
</div>

有图像和段落内联

2 个答案: