我有一个具有以下样式的按钮类:
.button {
align-items: center;
background-color: #fff;
border: 2px solid;
border-color: #f48120;
color: #f48120;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}
.button::after {
background-color: #fff;
bottom: -4px;
content: '\f111';
display: flex;
font-family: 'FontAwesome';
font-size: 5px;
justify-content: center;
position: absolute;
width: 25%;
}
<button class="button">Enviar</button>
在Firefox中看起来像预期的那样:
但是在Chrome,Safari和Vivaldi中,它看起来像这样:
如果取消选中然后再次检查检查器中的“ position:absolute”属性,则圆会在中心对齐。这是Blink / Webkit错误吗?
绝对的元素不会被父母对齐而定位。只需将其定位在左侧,然后对其进行变换以使其居中。
只是一个旁注,不需要display: flex;
在绝对元素上使用。
.button {
align-items: center;
background-color: deeppink;
border: 2px solid;
border-color: aqua;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}
.button:after {
content: '';
background-color: deepskyblue;
bottom: -4px;
font-size: 5px;
position: absolute;
width: 25%;
height: 10px;
left: 50%;
transform: translateX(-50%);
}
<button type="button" class="button">Submit</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句