Как выровнять по вертикали изображение относительно другого элемента?

Question

Я пытаюсь достичь следующего визуального эффекта:

Я пробовал различные вещи, но не смогли сделать это. Вот наиболее упрощенная версия этого на codepen:

Ссылка на это codepen. HTML является:

<div class="outerContainer"> 
    <button>LOREM IPSUM</button> 

    <!-- This is the question mark image --> 
    <img src="http://i60.tinypic.com/adoqiv.png"> 
</div> 

CSS является:

// Just to see the border for testing 
$test-border-width: 3px; 
$test-border-style: dotted; 

.outerContainer { 
    border: $test-border-width $test-border-style green; 

    // Don't span entire width because later will center container 
    display: inline-block; 

    button { 
    border: $test-border-width $test-border-style red; 

    // I would like to be able to change the font size 
    // without having to worry about the question mark image, 
    // that is, for the image to be automatically vertically aligned 
    // in the middle. 
    font-size: 4em; 
    } 

    img { 
    border: $test-border-width $test-border-style cyan; 
    } 

} 

Совет высоко оценили. Также, если это возможно, рассуждения позади.

Answer 1

Установите оба детей vertical-align: middle:

.outerContainer { 
 
    display: inline-block; 
 
    border: 3px dotted green; 
 
} 
 
button { 
 
    vertical-align: middle; 
 
    border: 3px dotted red; 
 
} 
 
img { 
 
    vertical-align: middle; 
 
    border: 3px dotted cyan; 
 
} 
 
/* for testing different font sizes */ 
 
.outerContainer:nth-child(1) button { 
 
    font-size: 2em; 
 
} 
 
.outerContainer:nth-child(2) button { 
 
    font-size: 4em; 
 
} 
 
.outerContainer:nth-child(3) button { 
 
    font-size: 6em; 
 
}

<div class="outerContainer"> 
 
    <button>LOREM IPSUM</button> 
 
    <img src="http://i60.tinypic.com/adoqiv.png"> 
 
</div> 
 

 
<div class="outerContainer"> 
 
    <button>LOREM IPSUM</button> 
 
    <img src="http://i60.tinypic.com/adoqiv.png"> 
 
</div> 
 
<div class="outerContainer"> 
 
    <button>LOREM IPSUM</button> 
 
    <img src="http://i60.tinypic.com/adoqiv.png"> 
 
</div>

Updated Pen

Answer 2

Вы можете попробовать установить vertical-align: middle; на IMG тег, но он должен разделить ту же высоту, что и текст в кнопке (что не так уж плохо, так как вы можете установить высоту в EMS, а):

.spaSwitch { 

    button { 
    display: inline-block; 
    $button-color: #a84040; 
    background-color: $button-color; 
    border-color: $button-color; 
    color: #FFFFFF; 
    border-radius: 14px; 
    border: 1px solid transparent; 
    font-size: 1.1em; 
    height: 2.1em; 
    padding: 0 0.4em; 
    cursor: pointer; 
    } 

    .questionMarkHolder { 
    display: inline-block; 
    line-height: 2.1em; 
    height: 2.1em; 

    img { 
     vertical-align: middle; 
    } 
} 
} 

Codepen : http://codepen.io/anon/pen/RNrwVr

Кроме того, с помощью pseudoelement может подойдет вам лучше, так как вы не должны установить высоту любых элементов:

.spaSwitch { 
    $padding: 0.4em; 

    button { 
    position: relative; 
    $button-color: #a84040; 
    background-color: $button-color; 
    border-color: $button-color; 
    color: #FFFFFF; 
    border-radius: 14px; 
    border: 1px solid transparent; 
    font-size: 1.1em; 
    padding: $padding; 
    cursor: pointer; 

     &:after { 
     content: url('http://i60.tinypic.com/adoqiv.png'); 
     position: absolute; 
     right: -30px; 
     top: 50%; 
     margin-top: -12px; // half of the height 
     cursor: default; 
     } 
    } 
} 

CODEP ан: http://codepen.io/anon/pen/yyeLbj