[英]Align text within bordered div
I am trying to align text vertically and horizontally within a rounded div (with a border radius).我正在尝试在圆形 div(带有边框半径)内垂直和水平对齐文本。 I tried tags like
position:absolute
and relative
我尝试了诸如
position:absolute
和relative
类的标签
I tried adding this :我尝试添加这个:
text-align: center;
display: inline-block;
overflow: hidden;
in my CSS but I had no success.在我的 CSS 中,但我没有成功。
Below is the snippet.下面是片段。 I wonder what the optimal solution would be without adding other divs.
我想知道不添加其他 div 的最佳解决方案是什么。 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>
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
您的计划是将
backside rounded div .back .side
内的文本正确对齐在中心,然后从<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;"> </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>
Simply add a padding
of 10% to .card .back
只需向
.card .back
添加 10% 的padding
.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>
Add this to your CSS just after your .card .back
line..在
.card .back
行之后将.card .back
添加到您的 CSS 中。
.back>p:first-child {
padding-top: 40px;
}
EDIT:编辑:
Also you can reduce the line height in .card .back
to prevent overflow.您也可以减少
.card .back
的行高以防止溢出。 I reduced it to 20px.我把它缩小到 20px。 Seemed to fit better, but that is a matter of preference..
似乎更适合,但这是一个偏好问题..
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.由于需求是,如评论中所述,将圆圈中的内容垂直和水平居中,因此我们可以使用 flexbox。
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.请注意,这并没有解决您所看到的任何溢出问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.