在此元素内居中文本/覆盖死区？答案

【问题标题】：Center text inside this element/override deadspace?在此元素内居中文本/覆盖死区？
【发布时间】：2013-08-21 19:28:58
【问题描述】：

我不确定问题出在哪里，但是在这个元素内部，左侧有一些死区，对我所做的任何事情都没有反应。我想将元素内的文本居中（它居中，只是左侧有一些空白空间似乎没有被考虑在内）。这是一张图片：

您可以看到左侧的内边距比右侧的内边距大得多。我尝试手动设置padding-left，但没有奏效。

这是页面中的元素（我正在使用 rails）：

<div class="holder round clear eval_body">
  ...
  <div class="box center">
    Before continuing to the next student, 
    <br />please take a moment to review the scores for <%= @student.name %>.
    <br />  
    <span class='strong'>
      Once you have submitted them, they cannot be changed!
    </span>
  </div>
  ...
</div>

和box 元素

.box {
    position: relative;
    bottom: 3px;
    left: 10em;
    width: 50%;
    height: 8%;
    background: #B05C37;
    border: 3px solid #902D00;
    color: #fff;
}

【问题讨论】：

位置应为绝对位置或左侧，底部应为 margin-left 和 margin-bottom。
对我来说看起来不错：jsfiddle.net/3HdKJ

标签： css ruby-on-rails centering

【解决方案1】：

将您的 css 类更改为 .box center 而不是 .box

【讨论】：

【解决方案2】：

添加

text-align: center;

到您的 CSS 中的 .box。

【讨论】：

【解决方案3】：

感谢您的建议（尤其是techvineet）。得到它的工作：

.box {
    position: absolute;
    bottom: 3.5%;
    right: 7%;
    margin: 5px;
    padding: 20px;
    width: 50%;
    background: #B05C37;
    border: 3px solid #902D00;
    color: #fff;
}

【讨论】：