Search code examples
htmlcsshtml-listscentering

How to center logo inside of circle?

I have a school project and I want to make a contact us page for my website. What I want to do is center the social media icon inside a circle. I have included a code sample below.

.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>

on my screen, the code runs like this:enter image description here

I also made a class for the ul due to me already having a list. How do I center the logo inside the circle?

Solution

  • A simple "text-align: center" to all of your lis (.ul2 li) will center the icons.

    The code you provided seems to be vertically centered unlike the image you sent. If you want to center an item vertically and horizontally, one thing you can do is use flexbox styling. For items in a row (declaring display: flex defaults to a row direction), "justify-content" horizontally aligns while "align-items" vertically aligns 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>