如何使标志在圆圈内居中？ [复制]

【问题标题】：How to center logo inside of circle? [duplicate]如何使标志在圆圈内居中？ [复制]
【发布时间】：2020-12-12 02:35:57
【问题描述】：

我有一个学校项目，我想为我的网站创建一个联系我们页面。我想要做的是将社交媒体图标居中在一个圆圈内。我在下面包含了一个代码示例。

.ul2{
  display: flex;
}
.ul2 li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.con{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}
<html>
<head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <ul class="ul2">
    <li><i class="fab fa-facebook-f"></i></li>
    <li><i class="fab fa-twitter"></i></li>
    <li><i class="fab fa-instagram"></i></li>
    <li><i class="fab fa-linkedin-in"></i></li>
    <li><i class="fab fa-youtube"></i></li>
  </ul>
</body>
</html>

在我的屏幕上，代码运行如下：

由于我已经有一个列表，我还为 ul 开设了一个课程。如何使徽标在圆圈内居中？

【问题讨论】：

    标签： html css html-lists centering


    【解决方案1】：

    对所有 lis (.ul2 li) 进行简单的“文本对齐：居中”将使图标居中。

    与您发送的图片不同，您提供的代码似乎是垂直居中的。如果您想将项目垂直和水平居中，您可以做的一件事是使用 flexbox 样式。对于一行中的项目（声明 display: flex 默认为行方向），“justify-content”水平对齐，而“align-items”垂直对齐项目。

    display: flex;
justify-content: center;
align-items: center;


    .ul2{
  display: flex;
}
.ul2 li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  text-align: center;
  transition: .5s;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.con{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}
    <head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

    【讨论】：

      【解决方案2】：

      请将此样式添加到ul2 li

      .ul2 li{
 display: flex;
 align-items:center;
 justify-content:center;
}


      .ul2{
  display: flex;
}
.ul2 li{
  position: relative;
  display: flex;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
  align-items:center;
  justify-content:center;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.con{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}
      <head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-10-15
        • 1970-01-01
        • 2015-11-05
        • 2015-06-10
        • 1970-01-01
        • 1970-01-01
        • 2016-04-19
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode