垂直对齐容器中的文本 [英] Vertical aligning the text in a container

问题描述

我尝试对齐与浮动元素相邻的span元素。

I am trying to align span elements which are adjacent to a floating element.

这里是小提琴

.heading {
  background-color: tomato;
}
.heading::after {
  content: "";
  display: block;
  clear: both;
}
.heading > * {
  display: inline-block;
  vertical-align: middle;
  color: beige;
  padding: 10px;
  font-family: Calibri;
}
.button {
  float: right;
  background-color: firebrick;
  font-family: Tahoma;
}

<div class="heading"> <span> some icon here</span>
  <!--
 --><span>some text here</span>

  <div class="button">Go</div>
</div>

我可以更改HTML。

一些注意事项:( 在看到以下答案后添加）

• 每个子元素的字体大小和高度不同。


• 如果我使用 display：table-cell ，子元素宽度在父容器中展开。 （ ）

• Font size and height of the each child elements are different.
• If I use display: table-cell, the child elements width are stretching in the parent container. (I need to just align the child elements vertically)

PS：我不是在寻找 display：flex 解决方案。

PS: I am not looking for display: flex solution.

推荐答案

c $ c> display：table-cell; 解决方案，但如果它只是一行，你可以使用 line-height （只是不要使用 display：table-cell; 使过程复杂化，因为有一些限制，例如您不能使用 margin and stuff）

I would love to go with the display: table-cell; solution but if it's just one line than you can use line-height here. (Just not to complicate the process using display: table-cell; as there are certain limitations such as you cannot use margin and stuff)

.heading {
    background-color: tomato;
    line-height: 40px;
}    

.button {
    float: right;
    padding: 0 10px;
    background-color: firebrick;
}

演示 （ line-height 解决方案）

所以基本上，我做的是摆脱你的自定义 padding 的按钮，并使用 line-height 改为。如果你认为你可以有多行，而不是让两个部分为 display：table-cell; 将更有意义。

So basically what am doing is getting rid of your custom padding for the button and using a line-height instead. If you think you can have more than one line, than making both the sections as display: table-cell; will make much more sense.

当你评论一个你有不同的 font-size 对我来说，所以一个解决方案是使用 display：table-cell; 和调整你的标记一点

As you commented a case where you have different font-size which doesn't make much sense to me, so a solution for that is to use display: table-cell; and tweak your markup a bit

演示2 （ display：table-cell ; solution）

Demo 2 (display: table-cell; solution)

<div class="heading"> 
    <div>
        <span> some icon here</span>
        <span>some text here</span>
    </div>
    <div>
        <div class="button">Go</div>
    </div>
</div>

.heading {
    background-color: tomato;
    line-height: 40px;
}

.heading > div {
    display: table-cell;
    vertical-align: middle;
}

.heading > div:first-child {
    width: 100%;
}

.heading span {
    display: inline-block;
    vertical-align: top;
}

.heading span:first-child {
    font-size: 30px;
}

.button {
    padding: 0 10px;
    background-color: firebrick;
}

这篇关于垂直对齐容器中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！