带有图标

Question

我已经从堆栈测试了不同的建议，但我仍然无法让它工作。

我试图将文本置于图标后面，但它看起来像这样： button with icon and text

我的css是：

    .leaflet-bar button,
    .leaflet-bar button:hover {
      background-attachment: fixed;
      background-color: #ffffff;
      border: none;
      width: auto;
      height: auto;
      max-height: 1200px;
      max-width: 1200px;
      line-height: 50%;
      vertical-align: middle;
      text-align: middle;
       }

    .leaflet-bar button {
      background-position: 50% 50%;
      background-attachment: fixed;
      background-repeat: no-repeat;
      overflow: hidden;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
      text-align: center;
       }

我的看法是，“text-align”应该完成这项工作。

我想念什么？

编辑：HTML SNIPPET：

   button: L.easyButton({
position: 'topright',
states: [{
  stateName: 'add-markers',
  icon: '<img alt="do this" src="icon-1.png" height="40" width="40" align="middle" style="opacity:0.4 "/><span id="text"><font color="black"><b>Hello World</b></font></span>',
  title: 'add random markers',
  onClick: function(control) {
    map.addLayer(markersWASH);
    control.state('remove-markers');
  }
}, {
  icon: '<img alt="do this" src="icon-1.png" height="40" width="40" align="middle"/>',
  stateName: 'remove-markers',
  onClick: function(control) {
    map.removeLayer(markers);
    control.state('add-markers');
  },
  title: 'remove markers'
}]

}）

我想要什么： WHAT I WAN