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 =“middle”。

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

Answer 2

试试这个，

＆＃13;

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

＆＃13;

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

＆＃13;

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">

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

3 个答案: