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

我希望“查找租户”为vertical-align:middle，并且完全为center。即使在最右边有“X”图标。以div居中文本，同时保持右边的关闭按钮

但所有我能得到的是这样的：

这里是我的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; 
}

这是可能做到？

来源

2017-07-18 torbenrudgaard

这个问题是很常见的，你可以使用垂直居中对齐伪元素。搜索堆栈溢出，你会发现很多例子 – Doomenik

如果你发布了其余的CSS，我可以为你运行一个代码片段。否则，你想要做的是绝对将“X”定位在左上方，因此它在图层碰撞之外。然后，您可以居中文本并添加填充或线条高度而不是垂直对齐。 – l3fty

试试下面的CSS：

见Fiddle Demo

CSS：

.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; 
    line-height: 40px; 
    width: 100%; 
} 
md-button.md-icon-button { 
    position: absolute; 
    right: 20px; 
}

来源

2017-07-18 09:41:01 Jainam

正确：20px没有工作，它移动20px到左边（非常奇怪）无论如何，当我把它放到1px它完美的工作:) – torbenrudgaard

您可以在按钮上使用line-height垂直居中的内容，并position: absolute拿出来的公文流转（因此对'找到租户'的水平对中没有影响：

.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; 
 
    width: 30%; 
 
    /* for demo */ 
 
    line-height: 40px; 
 
    position: relative; 
 
} 
 

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

<div class="book-find-tenant-head"> 
 
    Find Tenant 
 
    <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>

来源

2017-07-18 09:42:27 sol

这工作！ - 并感谢教我新东西:) – torbenrudgaard

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

来源

2017-07-18 09:55:26 Gerard

我见过之前，但我从来没有明白'flex'是做什么的？你能教一点吗？那些是什么？ 'justify-content：center; align-items：center;'他们有什么不同？ – torbenrudgaard

这解释了一切https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Gerard

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

回答

相关问题