이미지를 다른 요소와 관련하여 수직으로 정렬하는 방법은 무엇입니까?

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

당신은 태그를 IMG에 vertical-align: middle; 설정을 시도 할 수 있지만, (당신은뿐만 아니라 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