Align text within bordered div - html

Question

I am trying to align text vertically and horizontally within a rounded div (with a border radius). I tried tags like position:absolute and relative
I tried adding this :
text-align: center;
display: inline-block;
overflow: hidden;
in my CSS but I had no success.
Below is the snippet. I wonder what the optimal solution would be without adding other divs. Thanks in advance.
.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 }
<p style="text-align: center;"> </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 </span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates: </span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 - 22222222222 </span></span></p>
<p><span style="color: #000; font-size: 14pt;"> </span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444 </span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign: 55555555555555555} </span></p>
</div>
</div>
</div>
</div>

Answer 1

Is your plan is to align text within backside rounded div .back .side properly in center, then remove margin from <p> tag and add padding-top to .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;"> </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 </span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates: </span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 - 22222222222 </span></span></p>
<p><span style="color: #000; font-size: 14pt;"> </span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444 </span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign: 55555555555555555} </span></p>
</div>
</div>
</div>
</div>

Answer 2

Since the requirement is, as mentioned in the comments, to center the content in the circle vertically and horizontally, we can use flexbox for that.
Like so:
* {
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 </span>
</p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates: </span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 - 22222222222 </span></span>
</p>
<p><span style="color: #000; font-size: 14pt;"> </span>
</p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444 </span>
</p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign: 55555555555555555 </span>
</p>
</div>
</div>
</div>
</div>
Note that this does not address any overflow issues as you can see.

Answer 3

Add this to your CSS just after your .card .back line..
.back>p:first-child {
padding-top: 40px;
}
EDIT:Also you can reduce the line height in .card .back to prevent overflow. I reduced it to 20px. Seemed to fit better, but that is a matter of preference..

Answer 4

Simply add a padding of 10% to .card .back
.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 }
<p style="text-align: center;"> </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 </span></p>
<p><span style="color: #000; font-size: 14pt;"><span style="font-family: arial, helvetica, sans-serif;">Campaign Dates: </span><span style="font-family: arial, helvetica, sans-serif;">333333333333333 - 22222222222 </span></span></p>
<p><span style="color: #000; font-size: 14pt;"> </span></p>
<p><span style="color: #000; font-size: 14pt;">Length of campaign:4444444444444 </span></p>
<p><span style="color: #000; font-size: 14pt;">Days left of campaign: 55555555555555555} </span></p>
</div>
</div>
</div>
</div>