将div中的文本居中，同时保持右侧的关闭按钮

Question

我想要＆＃34; Find Tenant＆＃34;为vertical-align:middle且完全为center。即使使用＆＃34; X＆＃34;图标到最右边。

但我能得到的就是：

这是我的HTML

  <div class="book-find-tenant-head">
      Find Tenant
      <md-button class="md-icon-button" ng-click="ctrl.cancel()" style="float:right;">
        <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
      </md-button>
  </div>

这是我的book-find-tenant-head班级

.book-find-tenant-head {
    font-family: 'Roboto', 'Arial', 'sans-serif', 'Arial Narrow'; 
    font-weight:bold;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    display: inline-block; 
    vertical-align: middle;
    background-color: #337AB7;
    color:#FFFFFF;
    height:40px;
}

这可能吗？

Answer 1

尝试以下css：

请参阅Fiddle Demo

CSS：

#555

Answer 2

您可以使用 root: "/myapp/fileasset/ui.html" 对内容进行垂直居中，并使用按钮上的{{1}}将其从文档流中取出（因此不会影响＆＃39;找到租户＆ ＃39;：

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用flexbox和绝对定位是一种选择。

.book-find-tenant-head {
  font-family: 'Roboto', 'Arial', 'sans-serif', 'Arial Narrow';
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #337AB7;
  color: #FFFFFF;
  height: 40px;
}

.md-icon-button {
  position: absolute;
  right: 1em;
}

<div class="book-find-tenant-head">
  <span>Find Tenant</span>
  <md-button class="md-icon-button" ng-click="ctrl.cancel()">
    <md-icon class="material-icons book-material" aria-label="Close">close</md-icon>
  </md-button>
</div>