如何使此图标在css3中易于调整大小/响应?
我想在CSS3中创建以下图标,这样我就可以只显示“.circle”的宽度和高度(或其他包装器元素,重点是我想在一个位置调整宽度和高度,甚至使其自动适合任何容器,而不考虑宽度和高度)无需调整任何其他CSS3属性即可使“A”在中心对齐 最好的方法是什么?如果你能推荐一个更好的方法来做以下事情,我们将不胜感激。我所面临的问题是,将“.circle”的宽度和高度更改为更小会影响所有其他内容的定位,迫使我更改.circle2的属性和.letter的属性,直到所有内容对齐为止 CSS HTML如何使此图标在css3中易于调整大小/响应?,css,Css,我想在CSS3中创建以下图标,这样我就可以只显示“.circle”的宽度和高度(或其他包装器元素,重点是我想在一个位置调整宽度和高度,甚至使其自动适合任何容器,而不考虑宽度和高度)无需调整任何其他CSS3属性即可使“A”在中心对齐 最好的方法是什么?如果你能推荐一个更好的方法来做以下事情,我们将不胜感激。我所面临的问题是,将“.circle”的宽度和高度更改为更小会影响所有其他内容的定位,迫使我更改.circle2的属性和.letter的属性,直到所有内容对齐为止 CSS HTML 看一看。唯一
看一看。唯一棘手的是“A”字号。您可以使用像这样的库来完全实现这一点 代码如下所示并已修改 CSS3 HTML
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>