居中文字，即使div中有右或左按鈕？

Question

我使用下面的CSS居中文字：

.text-align-center { 
    text-align:center; 
} 

然而，當有在<div>左或右箭頭圖標，文字略有下車中心。

是否有可能使居中忽略箭頭圖標？

編輯：

這裏是我的HTML，其中的文字不是很因爲箭頭圖標

<ion-view> 
    <ion-content class="padding"> 
    <div ng-click="okDate(unreported)" class="item item-text-wrap item-icon-right text-align-center"> 
     {{ formattedRecentDate(unreported) }} 
     <i class="icon ion-ios-arrow-forward"></i> 
    </div> 
    </ion-content> 
</ion-view> 

Answer 1

我想你應該有兩個箭頭的包裝。左和右。然後將內容放置在箭頭之間的另一個div中，並使用居中文本。

然後，您可以根據需要隱藏其中一個箭頭（例如，當您位於第一頁時隱藏左箭頭）。

請記住只隱藏箭頭而不是包裝，以保持居中。

Answer 2

或者你可以做這樣的中心：

.exclude-my-width { 
    font-size: 15px; 
    margin-left: -20px; 
    width: 20px; 
} 

https://jsfiddle.net/1efpx6eq/1/

Answer 3

不知道這是如何做到這一點，但我認爲它是簡單的方法Ø實現這一點，如果內容沒有變

定義元素的width並設置margin自動

<div> 
    <i class='arrow_icon'></i>Hello There 
</div> 

<style> 
    div{ 
     width:100px; 
     margin:0px auto; 
    } 
</style>