Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我可以更改HTML。

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

每个子元素的字体大小和高度都不同。
如果我使用display: table-cell，则子元素宽度在父容器中拉伸。（我需要垂直对齐子元素）

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

Answer 1

我很乐意使用display: table-cell;解决方案，但如果它只是一行，则可以使用line-height。（只是不要使用display: table-cell;使流程复杂化，因为存在某些限制，例如您无法使用margin和其他内容）

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

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

Demo（line-height解决方案）

所以基本上我正在做的是删除按钮的自定义padding并使用line-height代替。如果您认为可以有多行，那么将这两个部分设为display: table-cell;会更有意义。

正如你评论的情况，你有不同的font-size对我来说没有多大意义，所以解决方法是使用display: table-cell;并略微调整你的标记

Demo 2（display: table-cell;解决方案）

<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;
}

Answer 2

将此添加到您的css：

    .heading span {
  line-height: 34px;
}

Answer 3

我认为您尝试display: table-cell属性

就像这样

.heading {
    background-color: tomato;
    display: table;
    width:100%;
}
/* clear fix */
 .heading::after {
    content:"";
    display: block;
    clear: both;
}
.heading > * {
    display: table-cell;
    vertical-align: middle;
    color: beige;
}
.button {
    float: right;
    padding: 10px;
    background-color: firebrick;
}
/* my attempt to align */
 .heading::before {
    content:"";
    height: 100%;
    width: 0px;
}

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

Answer 4

尝试

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 5

我建议使用填充并确保按钮的高度已设置。

.heading .mytext {
  height: 20px;
  float: left;

  padding-bottom: 10px;
  padding-top: 10px;
}


.button {
  float: right;
  padding: 10px;
  height: 20px;
  background-color: firebrick;

}

使用html

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

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

请参阅：http://jsfiddle.net/w7vngc43/20/

Answer 6

我在不使用display: table-cell的情况下修改了Mr.Alien的line-height解决方案。这是代码：

<强> HTML ：

<div class="heading">
    <div class="left"> <span class="left-one"> some icon here</span>
 <span class="left-two">some text here</span>

    </div>
    <div class="right">
        <button class="button-cancel">Cancel</button>
        <button class="button-go">Go</button>
    </div>
</div>

<强> CSS

.heading {
    background-color: tomato;
}
.heading > div {
    display: table-cell;
    vertical-align: middle;
}
.left {
    width: 100%;
}
.left span {
    display: inline-block;
    vertical-align: middle;
}
.left-one {
    font-size: 30px;
}
button {
    padding: 10px 15px;
    background-color: firebrick;
    border: none;
    margin: 0;
}
.right {
    white-space: nowrap;
}

<强> Working Fiddle

垂直对齐容器中的文本

6 个答案: