时间戳

首页 > 解决方案 > 绝对 div 内的图标未居中

html - 绝对 div 内的图标未居中

问题描述

我正在尝试构建一个可以显示在屏幕左下角的 div。下面是css。

  1. 图标未居中且
  2. 对于移动设备，div 显示在屏幕中央。

如何使图标居中以及如何为较小的设备收缩 div？

SCSS

.dot {
    position: fixed;
    right: 100px;
    bottom: 100px;
    width: 100px;
    height: 100px;
    background: #6fbd14;
    border-radius: 50%;
    text-align: center;
    vertical-align: bottom;

    a {
        i {
            font-size: 80px;
            color: #cfcfcf;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);

            &:hover,
            &:focus {
                color: $main-color;
            }
        }
    }
}

HTML

<div class="dot">
    <a routerLink="/market/cs">
        <i class="ri-add-line"></i>
    </a>
</div>

在此处输入图像描述

标签： htmlcsssass

解决方案

试试这个

对于锚元素

height:100%;
width:100%;
display:inline-flex;
justify-content:center;
align-items:center;

从i

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);


.dot {
  position: fixed;
  right: 100px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  background: #6fbd14;
  border-radius: 50%;
  text-align: center;
  vertical-align: bottom;
}
.dot a {
  height: 100%;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.dot a i {
  font-size: 80px;
  color: #cfcfcf;
}
.dot a i:hover, .dot a i:focus {
  color: green;
}
<div class="dot">
    <a routerLink="/market/cs">
    <i class="icon">I</i>
    </a>
</div>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

推荐阅读