我想将文本作为CSS3内容垂直和水平居中。中心在屏幕大小调整时应该没有问题。
请检查以下代码:http://jsfiddle.net/epomschar/3pb3swwe/
<div class="container"></div>
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
答案 0 :(得分:1)
只需删除bottom: 0;
即可获得解决方案。
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
/* bottom: 0; REMOVE THIS LINE */
left: 0;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
&#13;
<div class="container"></div>
&#13;
答案 1 :(得分:0)
只需向&:after
添加填充。如果您想要更改,只需添加padding-left
,padding-right
并根据需要更改位置。这一个padding
属性会对您的圈子进行更改,您可以使用padding-left
等指定我之前所说的更改。
.container {
position: relative;
height: 200px;
width: 200px;
&:after {
position: absolute;
content: 'Center me!';
top: 50%;
right: 0;
bottom: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
padding:30px; //MODIFICATION
}
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: yellow;
border-radius: 50%;
width: 100%;
height: 100%;
}
}
否则,您可以添加transform: translateY(-30%);
和margin:5%;
代替padding:30%;
答案 2 :(得分:0)
.container {
position: relative;
height: 200px;
width: 200px;
}
.container:after {
position: absolute;
content: '+';
color: white;
width: 100%;
font-size: 34px;
top: 50%;
text-align: center;
transform: translateY(-50%);
}
.container:before {
position: absolute;
content: '';
background-color: black;
border-radius: 50%;
width: 100%;
height: 100%;
}
<div class="container"></div>