Question

我想将浮动图像和容器（段落+标题）居中：

＆＃13;

.row {
  display: block;
  /* width: 100%; */
}
.left {
  float: left;
}
.right {
  float: right;
}

＆＃13;

<div class="row">
  <div class="container">
    <img class="right" src="" width="300" height="300" />
    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet</p>
    <div style="clear: both"></div>
  </div>
</div>
<div class="row">
  <div class="container">
    <img class="left" src="" width="300" height="156" />
    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet</p>
    <div style="clear: both"></div>
  </div>
</div>

＆＃13;

这也是live version of the problem。我已经清除了浮动但现在我无法将.img和.container元素居中。你会解决这个问题？

Answer 1

基本上你可以做的垂直对齐文本是将容器的显示更改为表，然后将段落更改为表格单元格，然后将vertical-align设置为中间，如下所示：

.row {
    display: table;
    overflow: hidden;
}
.left, .right {
    display: table-cell;
    vertical-align: middle;
}

您可能还需要将溢出设置为隐藏在容器上，以便由于浮动而保持高度。

Answer 2

浮动元素没有运气，因为它们不服从垂直对齐。您可以将display: table-cell与vertical-align: middle一起使用，这样就可以完美运行。尽管您需要稍微修改HTML结构，然后将内容放在图像之前，反之亦然，具体取决于您希望内容和图像显示在前端的方式。

＆＃13;

.container {
  display: table;
}
.content {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
}
.image {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
}
.image img {
  width: 100%;
}

＆＃13;

<div class="row">
  <div class="container">
    <div class="content">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="image">
      <img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="image">
      <img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
    </div>
    <div class="content">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

＆＃13;

垂直对齐浮动图像+容器（H + p）

2 个答案: