Html 为什么我的元素不是';他在边境的中间?
我不明白为什么在向元素添加边框时,元素不在边框的中心 我的css:Html 为什么我的元素不是';他在边境的中间?,html,css,Html,Css,我不明白为什么在向元素添加边框时,元素不在边框的中心 我的css: .arrow { font-size: 25px; color: #f9f9f9; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; border: 1px solid #f9f9f9; height: 50px; width: 50px;
.arrow
{
font-size: 25px;
color: #f9f9f9;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid #f9f9f9;
height: 50px;
width: 50px;
text-align: center;
margin: 0 auto;
}
我的html:
<span id="slide_left" class="arrow"><i class="fas fa-chevron-left"></i></span>
我只想让元素位于这个边界的中心
如果有人知道原因?:) 你的css中有太多的内容。从简单开始
.arrow{
font-size: 25px;
padding: 5px;
border: 1px solid black;
border-radius:50%;
}
尝试以下css代码:
.arrow{
display: block;
height: 50px;
width: 50px;
line-height: 50px;
border-radius: 50%;
border: 1px solid #000;
text-align: center;
font-size: 25px;
}
抱歉,像这样的圆不是真的,我的边框必须是圆:)你需要将元素放在箭头的中心,而不是箭头哦,是的,我知道了!