html - 图像和文本彼此相邻且位于 div 中间

Question

这就是我尝试做的:

所以基本上我有一个 div(按钮)，我想创建图像和文本都位于 div 中间并且彼此相邻。

这就是我到目前为止的位置:jsFiddle

代码:

        <div class="button">
         <img src="icon.png"/>
         <div class="click_here">Click Here!</div>
        </div>

CSS:

.button {
    max-width: 500px;
    width: 90%; 
    margin:0 auto;
    padding:10px 0;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #fbfbfb 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#fbfbfb 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#fbfbfb 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    -webkit-box-shadow:0 3px 4px rgba(0,0,0,.3);

}

.click_here {
    display:inline;
    vertical-align: middle;
  float:right;
}

Answer 1

使用 display:inline-flex; 的更优雅的解决方案:https://jsfiddle.net/cfvn5vaq/6/

添加以下 CSS:

.button {
  display:inline-flex;
  align-items:center;
}

以及内部元素的一些边距。该按钮也是完全可扩展且响应灵敏的。希望我有所帮助。