如何将图片和文本放在按钮内并使其居中？

Question

​

#submitCancel {
  float:left;
  width:49%;
  height:6em;
  background-color: green;
  color: white;
  /*font-size: 2em;*/
  border-style: none;
  padding: 0;
  border: none;
}

#submitCancel img {
  border:1px black solid;
}

.btnText {
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

<button type="button" id="submitCancel" onclick="closeForm();">
  <img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png">
  <span class="btnText">Cancel</span>
</button>

​

我尝试将图片和文本放在按钮内，并使其居中。我该怎么做呢？我

Answer 1

这应该是可行的。在img标签中使用align=“中间”。

  <img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">

Answer 2

尝尝这个,

​

#submitCancel {
  float:left;
  width:49%;
  height:6em;
  background-color: green;
  color: white;
  /*font-size: 2em;*/
  border-style: none;
  padding: 0;
  border: none;
}

#submitCancel img {
  border:1px black solid;
}

.btnText {
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">      
<span class="btnText">Cancel</span>
</button>

​

Answer 3

有两种方法。

将vertical-align: middle;属性添加到以下类中。

#submitCancel img {
    border: 1px black solid;
    vertical-align: middle;
}

或

将align="center"属性添加到图像标记。

<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="center">