0

我发现了关于如何使用 css 垂直对齐内容的不同建议。但是，这些都无法处理我想要的。这是我想要的：

一般来说，我有一些文本应该填充一些空间的左半部分，而图片应该在空间的右半部分。

如果文本的高度小于图片，则文本和图片都应在空间顶部垂直对齐：

TextTextText   PicturePicture
TextTextText   PicturePicture
               PicturePicture

如果文字的高度大于图片的高度，则文字应垂直对齐顶部，图片相对于文字居中。

TextTextText
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText

这是我尝试的一种直接方式（没有图片的文本版本）：

<div style="width: 100%">
  <div style="width: 50%; display: inline-block; vertical-align: top;">
    TextTextText <br>
    TextTextText <br>
    TextTextText
  </div><div style="width: 50%; display: inline-block; vertical-align: middle;">
    PicturePicture <br>
    PicturePicture
  </div>
</div>

然而，并没有达到我想要的效果。右边的内部 div（图片）只是在顶部而不是相对于文本的中间对齐。vertical-align: middle设置和设置没有区别vertical-align: top。然而，有趣的是，设置vertical-align: bottom会有所不同。

外部 div 包含在某个宽度的其他元素中。但是，我不能用任何固定的度量来指定这个宽度，例如 px。相同宽度的两个内部 div 相同。

使内部 divs 表格单元格达到正确的垂直效果。但是，我不能使用display: table-cell，因为我需要确保左侧内部 div 保持其宽度，即使右侧内部 div 可能具有向右溢出的内容，例如PicturePicturePicturePicturePicture.... 这会导致左侧单元格的宽度缩小，这是我不想要的。

此外，我不知道内容的高度，因此使用固定高度的垂直对齐技巧都不起作用。

这似乎不是一个太罕见的任务，但我无法找到任何解决方案。是否有可能做到这一点？

4

3 回答 3

0

如果您不希望左列缩小，请添加 a min-width。

http://jsfiddle.net/pUbWt/1/

.container {
  display: table;
  width: 100%;
}

.container .caption, .container .picture {
  display: table-cell;
}

.container .caption {
  vertical-align: top;
  min-width: 10em;
}

.container .picture {
  vertical-align: middle;
}

Flexbox 也可以，但在生产站点中开始使用还为时过早。

于 2013-01-16T00:07:50.803 回答
0

垂直对齐总是很棘手，因为 CSS 并不是为了实现这一点而设计的。
不过，这就是你所追求的吗？http://jsfiddle.net/N7px2/

如果是这样，请继续阅读。
首先，我删除了您的内联样式，因为这是不好的做法。只需<style>...</style>在 HTML 的头部使用，甚至更好：使用外部 CSS 文件。

然后，我浮动你的 div#b并#c像你的例子一样对齐它们。请参阅background-color和border快速了解每个元素的放置位置。
因为浮动让父元素崩溃，所以我使用了 clearfix 来解决这个问题。在此处阅读更多相关信息。

现在垂直对齐：我将图像定位在#cabsolute 并给它一个 margin top: 50%。显然，这将图像推得太多了，但这就是它的工作原理。之后，我应用了负片margin-top: -25%将图像拉回原位。请注意，这只适用于父元素是相对定位的。浏览器对负边距的支持非常好，只要它们不用于修复错误的布局，就可以使用它们。

另一个注意事项：因为position: absolute从流程中取出一个元素，所以会#c崩溃。如果你想给出#c一个background-image或类似的东西，你需要更多的标记来解决这个问题——只需添加另一个 div。

希望对您有所帮助！

编辑：对不起，我刚刚意识到这段代码与我相信的不完全一样。

于 2013-01-16T00:10:40.673 回答
0

我不清楚当图片对于右侧内部 div 来说太宽时你想要什么行为，除了它不应该影响左侧内部 div 的宽度，但这符合你的要求吗？

HTML。

<div class="container">
  <div class="caption cell">
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text
  </div>

  <div class="picture cell">
    <div>
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>

CSS

.container {display:table; table-layout: fixed; width:100%; }
.cell { display: table-cell; width:50%; }
.caption { vertical-align: top; }
.picture { vertical-align: middle; }
.picture div { overflow-x:hidden; }

JSFiddle 在http://jsfiddle.net/92wcy/1/

于 2013-01-16T09:18:32.347 回答