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

内在元素的一些边缘。该按钮还具有完全可扩展性和响应性。希望我帮忙。

Answer 2

添加此css

h2{
  line-height: 22px;
    margin: 0;
}

https://jsfiddle.net/cfvn5vaq/3/

Answer 3

在图像上应用垂直对齐中间以使文本居中。

<div class="button">
   <p style="margin: auto">
   <img style="vertical-align:middle" src="http://i.stack.imgur.com/SXklZ.png"/>
   Click Here!</p>
</div>

小提琴：https://jsfiddle.net/f4xkv3s8/

Answer 4

这适用于您的情况。

h2 {
     margin: 0 auto;
 }

Answer 5

对图像和标题使用内联块。

img, 
.click_here {
    display: inline-block;
}

这将允许您使用边距移动文本远离图像，并让文本在文本与图像之间保持正确的间距。

在此之后，您可能会失去将文本方向推到右侧的浮动。

.click_here {
    /* 
     * Remove this
     * float:right;
    */
}

然后，正如Asim所述，将图像垂直对齐到线的中间：

img {
    vertical-align: middle;
}

这里是小提琴（我还调整了填充，在左右两侧以及按钮的顶部和底部放置10px： https://jsfiddle.net/cfvn5vaq/7/

Answer 6

使用display:table-cell方法！效果很好

* {
  box-sizing: border-box;
}
.button {
  max-width: 500px;
  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);
  display: table;
  width: 100%;
  table-layout: fixed;
  /* to prevent firefox bug*/
  padding: 0 15px;
}
.btn-child {
  display: table-cell;
  vertical-align: middle;
}
.btn-img {
  width: 75px;
  height: 75px;
}
.btn-text {
  color: #000;
  text-align: left;
  padding-left: 15px;
}

<div class="button">
  <div class="btn-child btn-img">
    <img src="http://i.stack.imgur.com/iqHsd.png" alt="" />
  </div>
  <div class="btn-child btn-text">Click Here!</div>
</div>

图像和文本彼此相邻并位于div的中间

6 个答案: