将文本垂直对齐放在图像旁边

Question

我有一个按钮,我想将文本对齐到红色块的右侧和垂直中心.我该如何实现这一目标？

http://jsfiddle.net/ymoxqs4p/

HTML:

<button class="large" disabled>
    <svg viewBox="0 0 100 100" class="icon icon-browse">
        <use xlink:href="#icon-browse"></use>
    </svg>
    <span>Align Text</span>
</button>

CSS:

button.large {
font-size: 30px;
vertical-align:middle;
width:500px
}

.icon {
    width:100px;
    height:100px;
    background:red;
}

button {
    display:table
}

span {
    display: table-cell; 
    vertical-align: middle;
}

非常感谢任何指导.

Answer 1

用途inline-block:

button > span, button > svg {
    display:inline-block; 
    vertical-align: middle;
}

button.large {
  font-size: 30px;
  vertical-align: middle;
  width: 500px
}
.icon {
  width: 100px;
  height: 100px;
  background: red;
}
button > span,
button > svg {
  display: inline-block;
  vertical-align: middle;
}

<button class="large" disabled>
  <svg viewBox="0 0 100 100" class="icon icon-browse">
    <use xlink:href="#icon-browse"></use>
  </svg>
  <span>Align Text</span>
</button>