Question

我遇到了 CSS问题，我正在呼唤您的专业知识来帮助我！

我正在尝试对齐文字和图片。文本和图像应垂直居中，左对齐并且彼此相邻。这两个元素都应该包含在包装div 中，可以有不同的宽度。

以下是我到目前为止的代码：

<style>
  .cell {
    width: 150px;
    height: 200px;
    box-shadow: 0 0 0.5em #999;
    white-space: nowrap;
  }

  .text_element {
    height: 100%;
    display: inline-block;
    white-space: normal;
    float: left;
  }

  .tooltip_element {
    height: 100%;
    display: inline-block;
  }

</style>

<div class="cell">

  <div class="text_element"> This is some random, random text.</div>
  <div class="tooltip_element">
    <img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png"/>
  </div>

</div>

当包装内容 500px ：

时，上面的代码会生成下一张图像

在上面的图像中，元素彼此相邻，但不能垂直对齐。

对于宽度 200px ，我们遇到了另一个问题：

这里我们得到文本和图像之间的空白区域，它不应该存在，因为图像应该恰好适合文本。此外，图像元素现在位于div之外。

请注意：

包装内容可以有不同的宽度
解决方案应该适用于所有浏览器（无灵活解决方案）
没有JS，只能使用CSS

非常感谢你的帮助！

修改

文字应左对齐！

Answer 1

您可以使用 css表 https://jsfiddle.net/2Lzo9vfc/247/

<强> CSS

.cell {
  width: 100%;
  height: 200px;
  box-shadow: 0 0 0.5em #999;
  word-break:break-all;
}

.text_element {
  display: table-cell;
  vertical-align: middle;
}

.tooltip_element {
  display: table-cell;
  vertical-align: middle; 
}

Answer 2

好的，这是：

URL = [[NSString stringWithFormat:@"%@XYZ",API_PATH]stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];

.cell {
  width: 210px;
  height: 200px;
  box-shadow: 0 0 0.5em #999;
  white-space: nowrap;
  padding-right: 30px;
}
.text_element {
  display: inline-block;
  white-space: normal;
  float: left;
  text-align: justify;
  position: relative;
}
.tooltip_element {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

请注意我在text元素中包含了tooltip元素。所以我可以垂直对齐它们。如果他们一定是兄弟姐妹，我需要将它们都装在一个容器中，以便在没有柔性盒的情况下进行垂直居中。

如果您更喜欢jsFiddle，可以使用单元格宽度here it is。

并排居中文字和图片

2 个答案: