如何在左侧垂直对齐社交媒体图标？

Question

我创建了一个简单的社交媒体图标 html，css.it 在页面中心水平对齐。它应该垂直排列在页面的左侧。我必须在这里改变什么？我必须在我的网站上添加这些图标。所以它应该放在左边

    *{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}

body{
  background: #fff;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: 60px;
  height: 60px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg,#a3a1a1,#0f0f0f);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#a3a1a1,#0f0f0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>

    <div class="social-buttons">
      <a href="#"><i class="fab fa-whatsapp"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-itch-io"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-linkedin-in"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>

</body>
</html>

请帮我在左侧垂直排列这些图标。等待回应

Answer 1

您需要添加display:flex；和 flex-direction: column; 到 .social-button class 并从 body

中删除 display:flex;

.social-buttons {
  display: flex;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
  font-family: "montserrat", sans-serif;
}

body {
  background: #fff;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.social-buttons {
  display: flex;
  flex-direction: column;
}

.social-buttons a {
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: 60px;
  height: 60px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 8px;
}

.social-buttons a::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #a3a1a1, #0f0f0f);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before {
  transform: scale(0);
}

.social-buttons a i {
  transition: 0.3s ease-in;
}

.social-buttons a:hover i {
  background: linear-gradient(45deg, #a3a1a1, #0f0f0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

<body>

  <div class="social-buttons">
    <a href="#"><i class="fab fa-whatsapp"></i></a>
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-itch-io"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>

</body>

</html>

Answer 2

如果您希望图标水平对齐但它应该出现在页面左侧，请勾选此项，然后只需从正文选择器中删除 justify-content:center;

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}

body{
  background: #fff;
  height: 100vh;
  display: flex;
  align-items: center;
}


.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: 60px;
  height: 60px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg,#a3a1a1,#0f0f0f);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#a3a1a1,#0f0f0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>

    <div class="social-buttons">
      <a href="#"><i class="fab fa-whatsapp"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-itch-io"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-linkedin-in"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>

</body>
</html>

或者，如果您需要垂直对齐图标并与页面左对齐，则按照第一个答案进行操作 Vikas Jadhav

Answer 3

最好是为您的图标制作一个 position:absolute; 容器。这不会与您 HTML 中的正常代码流重叠您可以使用这种方法轻松处理其余代码的布局。试试下面的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
    />
  </head>

  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: "montserrat", sans-serif;
    }

    body {
      background: #fff;
      height: 100vh;
      width: 100vw;
    }

    /* --- Add this CSS --- */
    .social-buttons {
      position: absolute;
      left: 1rem;
      top: 4rem;
      display: flex;
      flex-direction: column;
    }
    .social-buttons a {
      display: inline-flex;
      text-decoration: none;
      font-size: 18px;
      width: 60px;
      height: 60px;
      color: #fff;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 4px 0;
    }

    .social-buttons a::before {
      content: "";
      position: absolute;
      width: 60px;
      height: 60px;
      background: linear-gradient(45deg, #a3a1a1, #0f0f0f);
      border-radius: 50%;
      z-index: -1;
      transition: 0.3s ease-in;
    }

    .social-buttons a:hover::before {
      transform: scale(0);
    }

    .social-buttons a i {
      transition: 0.3s ease-in;
    }

    .social-buttons a:hover i {
      background: linear-gradient(45deg, #a3a1a1, #0f0f0f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: scale(2.2);
    }
  </style>
  <body>
    <div class="social-buttons">
      <a href="#"><i class="fab fa-whatsapp"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-itch-io"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-linkedin-in"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </body>
</html>

如何在左侧垂直对齐社交媒体图标？

how to align social media icons vertically on left side?

html

css

responsive-design