时间戳

首页 > 解决方案 > 无法通过 SCSS/SASS 在 HTML CSS 中使用文本中心对齐

html - 无法通过 SCSS/SASS 在 HTML CSS 中使用文本中心对齐

问题描述

如果您在 codepen https://codepen.io/gladwin-james/pen/NWbrGWm中看到代码，我能够将最后一行 Almonds 居中对齐，但我在浏览器中使用了准确的代码，我无法将杏仁在我的浏览器中居中。杏仁需要在中心，但不是。我还分享了图片下方的确切代码

![在此处输入图像描述

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body {
  background: #e1e1e2;
  margin: 0px;
  margin-top: -15px;
}

.navbar1 {
  color: #fff;
  font-family: 'Poppins';
  text-align: center;
  background: #292727;
  // box-shadow: 0 10px 6px -6px #777;
}

.phone_favicon {
  width: 14px;
}

.navbar2 {
  margin-top: -15px;
  color: #fff;
  font-family: 'Poppins';
  text-align: center;
  background: #ffffff;
  // box-shadow: 0 10px 6px -6px #777;
  padding: 5px;
  // border-radius: 8px
}

.the_line {
  color: black;
}

// Products //
.our_products_are_nuts {
  text-align: center;
  font-size: 25px;
  font-family: 'Poppins';
}

.nuts_expl {
  text-align: center;
  font-family: 'Poppins';
  margin-top: -15px;
}

.nuts1 {
  text-align: center;
  font-family: 'Poppins';
  margin-top: -15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>Document</title>
</head>

<body>
  <div class="navbar1">
    <div class="container">
      <p> For Orders <img class="phone_favicon" src="images/phone.svg" alt="favicon-phoneicon"> +91 - 7299488343 / +91 - 7401429828</p>
    </div>
  </div>
  <div class="navbar2">
    <div class="container">
      <p> <a href="#">Products</a>
        <span class="the_line"> | </span>
        <a href="#">Services</a>
        <span class="the_line"> | </span>
        <a href="#">About Nuts</a>
        <span class="the_line"> | </span>
        <a href="#">Contact Us</a>
      </p>
    </div>
  </div>
  <!--//////////-->
  <div class="products">
    <p class="our_products_are_nuts">Our Products Are Nuts & Spice</p>
    <p class="nuts_expl">Call us to get Nuts and Spices at a best quality <br> and also at a best price</p>
  </div>
  <div class="pimary_products">
    <p class="nuts1">Almonds</p>
  </div>
</body>

</html>

我很困惑不知道该怎么办。请帮忙。帮我把那个螺母对准中心。

是的，我在执行之前也保存了程序，

标签： htmlcsssass

解决方案

只需将 替换// comment为/* comment */。

.navbar2 {
    margin-top: -15px;
    color: #fff;
    font-family: 'Poppins';
    text-align: center;
    background: #ffffff;
    /*box-shadow: 0 10px 6px -6px #777;*/
    padding: 5px;
    /*border-radius: 8px*/
  }
  
  .the_line {
    color: black;
  }
  
  /*Products*/
  .our_products_are_nuts {
    text-align: center;
    font-size: 25px;
    font-family: 'Poppins';
  }
  
  .nuts_expl {
    text-align: center;
    font-family: 'Poppins';
    margin-top: -15px;
  }
  
  .nuts1 {
    text-align: center;
    font-family: 'Poppins';
    margin-top: -15px;
  }

推荐阅读