以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居中文本，同時保持右邊的關閉按鈕

回答

相關問題