我有想要水平和垂直居中的图标。
请参阅下面的codepen和摘要:
div {
border: 1px solid black;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
width: 34px;
}
.icon {
color: hotpink;
font-size: 400%;
}
.icon::before {
content: '+';
}
<div class="icon-placeholder">
<span class="icon"></span>
</div>
无论.icon
的字体大小如何,我该怎么做呢。
我尝试了transform
,position: absolute
,display: table
没有运气。我不能使用flex。
答案 0 :(得分:0)
您可以使用transform
和absolute
定位
div {
border: 1px solid black;
margin: 10px;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
width: 34px;
position: relative;
}
.icon {
color: hotpink;
font-size: 400%;
margin-top: -10%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
.icon::before {
content: '+';
}
.plus-symbol{
font-size: 400%;
outline: dotted 1px red;
color: hotpink;
}
.left, .right{
width: 45%;
padding: 20px;
box-sizing: border-box;
}
.left{
float: left;
}
.right{
float: right;
}
.custom-plus-icon, .custom-plus-icon:before{
position: absolute;
width: 10%;
border-radius: 1px;
background-color: hotpink;
height: 80%;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.custom-plus-icon:before{
content: '';
width: 100%;
height: 100%;
transform: rotate(90deg);
}
<div class="left">
<h3>Plus symbol using font</h3>
<span class="plus-symbol">+</span>
<br/>
<br/>
<label>Font-size : 400%</label>
<div class="icon-placeholder">
<span class="icon"></span>
</div>
<label>Font-size : 300%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 300%;"></span>
</div>
<label>Font-size : 200%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 200%;"></span>
</div>
<label>Font-size : 100%</label>
<div class="icon-placeholder">
<span class="icon" style="font-size: 100%;"></span>
</div>
</div>
<div class="left">
<h3>Plus symbol using pseudo element</h3>
<div class="icon-placeholder">
<span class="custom-plus-icon"></span>
</div>
</div>
答案 1 :(得分:0)
但值得注意的是,+
不一定在第一位置居中,具体取决于字体。
div {
border: 1px solid black;
}
.icon-placeholder {
height: 34px;
overflow: hidden;
position: relative;
width: 34px;
}
.icon {
color: hotpink;
font-size: 400%;
}
.icon::before {
content: '0';
display: inline-block;
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
}
<div class="icon-placeholder">
<span class="icon"></span>
</div>