Clever Geek Handbook

Vertical alignment of text in a container

I am trying to align span elements that are adjacent to a floated element.

Here is a violin

.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>
Run code


I can change the HTML.

Some considerations: (Added after viewing below answers)

  • The font size and height of each child is different.
  • If I use display: table-cell

    , the width of the children is stretched in the parent container. (I just need to align the children vertically)

PS: I'm not looking for a solution display: flex

.

+3


source to share


6 answers


I would love to go with a solution display: table-cell;

, but if it's only one line, you can use line-height

here. (In order not to complicate the process with using display: table-cell;

, since there are certain restrictions, for example, you cannot use margin

and so on)

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

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

Demo (line-height

solution)

So basically I do it by getting rid of your custom padding

for the button and use instead line-height

. If you think you can have more than one line than make both sections display: table-cell;

more useful.



As you commented the case where you have different font-size

which doesn't make a lot of sense to me, so the solution for this is to use display: table-cell;

and tweak your markup a bit

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


source


Add this to your css:



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


source


I think you are trying to execute display: table-cell

property

as shown

.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>
Run code


+1


source


Try

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


source


I would suggest using a shim and make sure the button height is set.

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

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


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

}

with html

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

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

See: http://jsfiddle.net/w7vngc43/20/

0


source


I changed Mr. Alien's solution display: table-cell

without using line-height

. Here is the code:

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 script

0


source






More articles:


All Articles