图像和文本彼此相邻并位于div的中间 [英] Image and Text next to each other and in the middle of the div

问题描述

这就是我试图做的:

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

So basically i have a div (button) and i want to create that both image and text is in the middle of the div and next to each other.

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

This is where i'm so far: 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;
}

推荐答案

使用 display:inline-flex; 的更优雅的解决方案:

A more elegant solution using display:inline-flex;: https://jsfiddle.net/cfvn5vaq/6/

添加以下CSS:

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

内部元素还有一些空白.该按钮还具有完全可伸缩性和响应能力.希望我能帮上忙.

And some margins to the inner elements. The button is also completely scalable and responsive. Hope I helped.

这篇关于图像和文本彼此相邻并位于div的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！