问文本垂直-与其他元素对齐
EN

Stack Overflow用户

提问于 2017-08-16 14:07:19

回答 3查看 866关注 0票数 1

在下面的代码片段中，我有一个标题和一个图像，这两个div都在一个容器div中。图像向右浮动，高度固定为80px。我想要的是标题在左侧，图像在同一行的右侧，文本与图像的底部对齐。首先，我在.text-element上尝试了inline-block，在.text-element-content上尝试了inline -block，但在那里垂直对齐似乎不起作用。经过几次尝试和阅读，我想出了以下显示的解决方案: table/table-cell，加上为.text-element设置一个固定的高度，然后垂直对齐: bottom就行了。但随后我看到了另一个(小)问题。现在，标题文本中"p“的最低点与图像的底线在同一行上。但我希望其他字母的底部，如"e"，"d"，"t“与图像在同一行-底线。我试着垂直对齐:基线，但它似乎是用于完全不同的东西……有没有办法实现我想要的东西？有没有更好的垂直对齐方式:底部不带table/table-cell？出于某些原因，我可能不会更改DOM，只会更改其上的CSS，我也可能不会使用flex-box。

不同行高的解决方案不会完全解决我的问题，因为它只适用于这种特殊情况，一旦字体改变，我就需要另一个行高。

.container-element {
    position: relative;   
}

.image {
    float: right;
}

.text-element {
    display: table;
    height: 80px;
}

.text-element-content {
    display: table-cell;
    vertical-align: bottom;
}

<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>

html

css

vertical-alignment

回答 3

Stack Overflow用户

发布于 2017-08-16 14:12:36

您可以尝试调整文本的line-height属性：

.container-element {
  position: relative;
  border-bottom: 1px solid red;
}

.image {
  float: right;
}

.text-element {
  display: table;
  height: 80px;
  line-height: .7;
}

.text-element-content {
  display: table-cell;
  vertical-align: bottom;
}

<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>

票数 2

Stack Overflow用户

发布于 2017-08-16 14:19:16

即使你说你不能使用flex-box (因为IE)，我还是会用flex-box解决方案来回答。IE11在flexbox上运行得很好。请参阅caniuse.com上的已知问题。

与订单相结合，解决方案可能如下所示：

.container-element {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.image {
  order: 2;
}

.text-element {
  order: 1;
}

<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2017-08-16 15:53:06

受bootstrap启发，这应该可以做到这一点。

.container-element {
    position: relative;   
}

.media-left,.media-right {
    display: table-cell;
    vertical-align: top
}

.media-right {
    padding-left: 10px
}

.media-left {
    padding-right: 10px
}

.media-bottom {
    vertical-align: bottom
}

<div class="container-element">
  <div class="media-left media-bottom">
    I'm a title with help
  </div>
  <div class="media-right">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
</div>