如何垂直对齐另一个元素的图像？

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

您可以尝试在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

此外，使用伪元素可能更适合您，因为您不必设置任何元素的高度：

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

Codepen：http://codepen.io/anon/pen/yyeLbj

Answer 2

将两个孩子都设为vertical-align: middle：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Updated Pen