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>

即使div中有向右或向左按钮，也会居中显示文字？

3 个答案: