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

我会这样做，在后视图中设置A a(A::Key{});，在前视图中设置为text-align: right，center标记的垂直居中设置以及更改其他一些设置（否）填充[因此改变了宽度和高度设置]和其他一些细节）：

.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;
}

Answer 2

这是如何正确对齐文本的示例

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right {
                float: right;
                width: 300px;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
    <body> 
        <h2>Right Align</h2>
        <p>An example of how to right align elements with the float property:</p>
        <div class="right">
            <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
        </div>    
    </body>
</html>

在一个盒子上对齐文本

2 个答案: