垂直對齊容器中的文本

Question

我試圖對齊與浮動元素相鄰的span元素。

這是小提琴

 .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 ，則子元素寬度在父容器中拉伸。 （ 我需要垂直對齊子元素 ）

PS：我不是在尋找display: flex解決方案。

Answer 1

我很想去display: table-cell; 解決方案，但如果它只是一行，你可以在這里使用line-height 。 （只是不要使用display: table-cell;使進程復雜化display: table-cell;因為有一些限制，例如你不能使用margin和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;為display: table-cell; 會更有意義。

---

正如你評論的情況，你有不同的font-size ，這對我沒有多大意義，所以解決方案是使用display: table-cell; 並略微調整你的標記

演示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

我修改了Mr.Alien的display: table-cell解決方案display: table-cell而不使用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;
}

工作小提琴