在按钮标签中移动元素答案

【问题标题】：Move element in a button tag在按钮标签中移动元素
【发布时间】：2016-03-02 13:15:22
【问题描述】：

我有这段代码：

<div style="float: right">       
<button type="button" class="btn btn-link colorGrey " ng-click="ViewFactory.ShowView('WelcomepageModule')" ng-show="({IsActive: true, IsVisible: true, IsMandatory: true}).IsVisible" ng-disabled="!({IsActive: true, IsVisible: true, IsMandatory: true}).IsActive" ng-required="({IsActive: true, IsVisible: true, IsMandatory: true}).IsMandatory" required="required" style="font-size: 1.5em;">     
        <span class="fa fa-times" style="margin-right: 2px"></span> Close                                 
</button>
</div>

我想将字体真棒图像与“关闭”一词的中心对齐。我该怎么做？

【问题讨论】：

align 到？ right 还是 left？ center ?!
我想将图像移到“关闭”一词的顶部
现在它们与底部对齐

标签： html css button web

【解决方案1】：

您的代码的简单版本。请尝试以下语法的概念。

HTML

<button type="button" class="btn btn-link colorGrey ne-cls">
<span class="fa fa-times icn-cls" style="margin-right: 2px; "></span> <span class="txt">Close</span> 
 </button>

CSS

.ne-cls {diplay:inline-block;}
.icn-cls{vertical-align:middle;}
.txt {vertical-align:middle;}

【讨论】：

【解决方案2】：

不确定您是希望图标与顶部对齐还是希望图标位于顶部。所以，这两个都是。

您可以将按钮的内容设置为块并使用下面的 css。

<div style="float: right">
  <button type="button" class="btn btn-link colorGrey" style="font-size: 1.5em;">
    <span class="fa fa-times" style="margin-right: 2px"></span>
    <span>Close</span>
  </button>
</div>

button > * {
  display: block;
  text-align: center;
}

JSFiddle

或

button > * {
  display: inline-block;
  vertical-align: top;
}

JSFiddle

【讨论】：