Question

我试图在圆角div（边框半径）内垂直和水平对齐文本。我尝试了position:absolute和relative

等标签

我尝试添加这个：

text-align: center;
display: inline-block;
overflow: hidden;

在我的CSS中，但我没有成功。

以下是摘录。我想知道如果没有添加其他div，最佳解决方案是什么。提前谢谢。

＆＃13;

.card-container2 {
  cursor: pointer;
  height: auto;
  perspective: 600;
  position: relative;
  width: auto;
margin:auto;
align-contents:center;
    }

.card-container {

cursor: pointer;
  height: 350px;
  perspective: 600;
  position: relative;
  width: 350px;
    border-radius: 50%;
display:block;
margin-left:auto;
margin-right:auto;

}
.card {
  height: 100%;
  position: absolute;
  transition: all 1s ease-in-out;
 transform-style: preserve-3d;
  width: 100%;
    border-radius: 50%;

-moz-animation-name: dropCard;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropCard;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration:0.3s;

    animation-name: dropCard;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;

}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  background:#000;
  border-radius: 50%;
}

.card .back {
  background: #F1F1F1;
  color: #000;
  line-height: 24px;
font-weight: bold;
  text-align: center;
    border-radius: 50%;
  transform: rotateY(180deg);
}


@-moz-keyframes dropCard {
    0% {
        -moz-transform: translateY(-100px);
    }

  100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropCard {
    0% {
        -webkit-transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes dropCard {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

＆＃13;

<p style="text-align: center;">&nbsp;</p>
<div class="card-container2">
<div class="card-container">
<div class="card">
<div class="side" style="text-align: center;"><img class="displayed" src="IMAGE" alt="" width="350" height="350" /></div>
<div class="side back">
<p><span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #000;">Campaign Name: 11111111&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates:&nbsp;</span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 -&nbsp;22222222222&nbsp;</span></span></p>
<p><span style="color: #000; font-size: 14pt;">&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign:&nbsp;55555555555555555}&nbsp;</span></p>
</div>
</div>
</div>
</div>

＆＃13;

Answer 1

您的计划是将<p> tag内的文字正确对齐中心，然后从padding-top移除边距并将.back添加到.card .back { background: #F1F1F1; color: #000; line-height: 24px; font-weight: bold; text-align: center; border-radius: 50%; transform: rotateY(180deg); padding-top:75px; box-sizing:border-box; } p{ margin:5px 0px; text-align:center; }

.card-container2 {
  cursor: pointer;
  height: auto;
  perspective: 600;
  position: relative;
  width: auto;
margin:auto;
align-contents:center;
    }

.card-container {

cursor: pointer;
  height: 350px;
  perspective: 600;
  position: relative;
  width: 350px;
    border-radius: 50%;
display:block;
margin-left:auto;
margin-right:auto;

}
.card {
  height: 100%;
  position: absolute;
  transition: all 1s ease-in-out;
 transform-style: preserve-3d;
  width: 100%;
    border-radius: 50%;

-moz-animation-name: dropCard;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropCard;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration:0.3s;

    animation-name: dropCard;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;

}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  background:#000;
  border-radius: 50%;
}

.card .back {
  background: #F1F1F1;
  color: #000;
  line-height: 24px;
font-weight: bold;
  text-align: center;
    border-radius: 50%;
  transform: rotateY(180deg);
  padding-top:75px;
  box-sizing:border-box;
}
p{
  margin:5px 0px;
  text-align:center;
}


@-moz-keyframes dropCard {
    0% {
        -moz-transform: translateY(-100px);
    }

  100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropCard {
    0% {
        -webkit-transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes dropCard {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

<p style="text-align: center;">&nbsp;</p>
<div class="card-container2">
<div class="card-container">
<div class="card">
<div class="side" style="text-align: center;"><img class="displayed" src="IMAGE" alt="" width="350" height="350" /></div>
<div class="side back">
<p><span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #000;">Campaign Name: 11111111&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates:&nbsp;</span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 -&nbsp;22222222222&nbsp;</span></span></p>
<p><span style="color: #000; font-size: 14pt;">&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign:&nbsp;55555555555555555}&nbsp;</span></p>
</div>
</div>
</div>
</div>

TextBox1

Answer 2

只需将padding 10％添加到.card .back

即可

＆＃13;

.card-container2 {
  cursor: pointer;
  height: auto;
  perspective: 600;
  position: relative;
  width: auto;
margin:auto;
align-contents:center;
    }

.card-container {

cursor: pointer;
  height: 350px;
  perspective: 600;
  position: relative;
  width: 350px;
    border-radius: 50%;
display:block;
margin-left:auto;
margin-right:auto;

}
.card {
  height: 100%;
  position: absolute;
  transition: all 1s ease-in-out;
 transform-style: preserve-3d;
  width: 100%;
    border-radius: 50%;

-moz-animation-name: dropCard;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropCard;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration:0.3s;

    animation-name: dropCard;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;

}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  background:#000;
  border-radius: 50%;
}

.card .back {
  background: #F1F1F1;
  color: #000;
  padding:10%;
  line-height: 24px;
font-weight: bold;
  text-align: center;
    border-radius: 50%;
  transform: rotateY(180deg);
}


@-moz-keyframes dropCard {
    0% {
        -moz-transform: translateY(-100px);
    }

  100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropCard {
    0% {
        -webkit-transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes dropCard {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

＆＃13;

<p style="text-align: center;">&nbsp;</p>
<div class="card-container2">
<div class="card-container">
<div class="card">
<div class="side" style="text-align: center;"><img class="displayed" src="IMAGE" alt="" width="350" height="350" /></div>
<div class="side back">
<p><span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #000;">Campaign Name: 11111111&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates:&nbsp;</span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 -&nbsp;22222222222&nbsp;</span></span></p>
<p><span style="color: #000; font-size: 14pt;">&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444&nbsp;</span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign:&nbsp;55555555555555555}&nbsp;</span></p>
</div>
</div>
</div>
</div>

＆＃13;

Answer 3

在.card .back行之后将其添加到CSS中。

.back>p:first-child {
    padding-top: 40px;
}

编辑：
您也可以减少.card .back中的行高以防止溢出。我减少到20px。似乎更适合，但这是一个偏好的问题..

Answer 4

由于要求是，如评论中所述，要将内容垂直和水平居中放置，我们可以使用flexbox。

像这样：

* {
  margin: 0;
  padding: 0;
}
.card-container2 {
  cursor: pointer;
  height: auto;
  perspective: 600;
  position: relative;
  width: auto;
  margin: auto;
  text-align: center;
}
.card-container {
  cursor: pointer;
  height: 350px;
  perspective: 600;
  position: relative;
  width: 350px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.card {
  height: 100%;
  position: absolute;
  transition: all 1s ease-in-out;
  transform-style: preserve-3d;
  width: 100%;
  border-radius: 50%;
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  background: #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align:center;
}
.card .back {
  background: #F1F1F1;
  color: #000;
  line-height: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
}

<div class="card-container2">
  <div class="card-container">
    <div class="card">
      <div class="side" style="text-align: center;">
        <img class="displayed" src="IMAGE" alt="" width="350" height="350" />
      </div>
      <div class="side back">
        <p><span style="font-size: 14pt; font-family: arial, helvetica, sans-serif; color: #000;">Campaign Name: 11111111&nbsp;</span>
        </p>
        <p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates:&nbsp;</span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 -&nbsp;22222222222&nbsp;</span></span>
        </p>
        <p><span style="color: #000; font-size: 14pt;">&nbsp;</span>
        </p>
        <p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444&nbsp;</span>
        </p>
        <p><span style="color: #000; font-size: 14pt;">Days left of campaign:&nbsp;55555555555555555&nbsp;</span>
        </p>
      </div>
    </div>
  </div>
</div>

请注意，您无法解决任何溢出问题。

对齐div中的文本

4 个答案: