html - 对齐框上的文本

Question

我有一个翻盖盒，看起来像这样

当我将鼠标悬停在它上面时，它会转身，看起来像这样。

我想知道，如何将文本仅向右移动，我尝试将 text-align: right;在我的CSS上，但没有用。我做错了吗？

这是我的 CSS 和 HTML:

.box9 {
  background-color: #4C586F;
  width: 250px;
  height: 150px;
  margin: 0 auto;
  padding: 45px;
}

.box10 {
  background-image: url("../img/commended/erwin.png");
  background-size: 50%;
  background-repeat: no-repeat;
  width: 250px;
  height: 150px;
  margin: 0 auto;
  padding: 45px;
}

<div class="col_third">
  <div class="hover panel">
    <div class="front">
      <div class="box9">
        <p style="font-size:180%; color: white">Kudos!</p>
      </div>
    </div>
    <div class="back">
      <div class="box10">
        <p style="font-size:180%; color: black">sdasdsadas</p>
      </div>
    </div>
  </div>
</div>

Answer 1

我会这样做，在后 View 中设置 text-align: right 并在前 View 中设置为 center，p 的垂直居中 标签并更改其他一些设置(无填充 [因此更改宽度和高度设置] 和其他一些细节):

.box9 {
  background-color: #4C586F;
  width: 340px;
  height: 240px;
  margin: 0 auto;
  text-align: center;
}

.box10 {
  background-image: url(http://placehold.it/150x250/);
  background-size: auto 100%;
  background-repeat: no-repeat;
  width: 340px;
  height: 240px;
  margin: 0 auto;
  text-align: right;
}

.box9 p,
.box10 p {
  margin: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.box10 p {
  padding-right: 20px;
}

<div class="col_third">
  <div class="hover panel">
    <div class="front">
      <div class="box9">
        <p style="font-size:180%; color: white">Kudos!</p>
      </div>
    </div>
    <div class="back">
      <div class="box10">
        <p style="font-size:180%; color: black">sdasdsadas</p>
      </div>
    </div>
  </div>
</div>