Question

我正在设计一个页面，我有3个问题，2个与纯.css相关，1个与less相关。

我的第一个问题是我在正文标记上设置了margin: auto和padding: auto，并且没有将它与中间对齐（代码在末尾共享），第二个问题，我有一个h1标签，在CSS中我试图将垂直对齐设置为中间，但它不起作用。

我的第三个主要问题是，我有多个div，每个div都有特定的背景颜色和div之间的共享属性，只有颜色会有所不同。有没有办法从HTML传递背景颜色名称，因为我使用把手作为模板引擎？

我有每个div与类.item，我想从html传递这个类的颜色。我的代码如下所示：

CSS：

html{
  font-size: 12px;
  font-family: Arial, sans-serif;
}

body{
  margin: auto;
  padding: auto;
  /* Why the page isn't centered in the middle */
}

h1{
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /*What to put here to make it centered? */  ;
}
.flex{
      display: flex;
    }
/* How do I pass variables from Html to my mixin so I don't repeat for each color the following code 

.red{
  background-color: red;
}
.green{
  background-color: green;
}
etc.. 

How do I do this below?
*/

.item(@fontColor){
.item{
  width: 30%;

  h3{
    color: grey;
  }
  span{
    font-style: italic;
  }

 }
}

我的HTML看起来像这样：

    <!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet/less" href="style.less" />
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>

    <div class="flex">
      <div class="item red">
        <h3>
        Project 1
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item green">
        <h3>
        Project 2
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item blue">
        <h3>
        Project 3
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item yellow">
        <h3>
        Project 4
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item navy">
        <h3>
        Project 5
        </h3>
        <span>Time: 10:30AM</span>
        </div>

    </div>
  </body>

</html>

我的代码的工作示例可以在这里找到： https://plnkr.co/edit/ROp2tLBKeSNYJVBCYwUL?p=preview

感谢您帮助我解决这三个问题。

Answer 1

将来我建议不要在一篇文章中提出这么多问题，因为如果你每个问题都做一个问题，那么回复会更好更容易。

现在我已在下面回答了你的问题，在底部更新了plunker：

关于身体居中，您需要在身体标签内使用div，并给它一个固定的宽度。这允许您使用margin:0 auto将div相对于身体居中。

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

body{
  /*Your element requires a fixed width to center it in relation to the body*/
  #pagewrap{
   width:800px;
   margin:0 auto;
 }
}

关于H1：

创建一个元素以围绕H1设置它display到table并给它一个高度。然后在H1上使用以下css：

你的html变成了：

 <div class="header-container">
     <h1>Hello Plunker!</h1>  
 </div>

你的少：

 .header-container{
      background-color: red;
      height: 50px;
      display:table;
      width:100%;
      h1{
        vertical-align: middle;
        text-align: center;
        display:table-cell;
      }
    }

关于颜色，你不需要mixin：

less这样做的方式是：

.item{
  width: 30%;

  h3{
    color: grey;
  }
  span{
    font-style: italic;
  }
  &.red{
     background-color: red;
  }
  &.green{
     background-color: green;
   }
 }
}

这将生成以下css：

.item.red {
 background-color: red;
}

等

这意味着任何具有类item red的元素将使用红色背景颜色等呈现其他颜色。

Plunker：https://plnkr.co/edit/WU2pQfwtq6dkLy124tLD?p=preview

Answer 2

要创建居中的内容部分，内容需要宽度。正如JanR所建议的那样，使用某种包装器，设置一个宽度（或一些响应/流动性的最大宽度），然后保证金：0 auto;。填充：auto不做任何事情。

对于你的H1 - 你究竟想做什么？你可以做表格技巧，但这确实涉及额外的标记以获得小额支付。您可以将高度设置为H1，然后将行高设置为相同。即：h1 {身高：30px; line-height：30px;}。请记住，元素上也有一个默认的边距。您也可以使用Flexbox实现它。鉴于您的HTML示例，我也看不到您要将其垂直居中的内容。

最后，对于你的颜色问题：不，你不能将HTML类传递给CSS。并且您不需要Less或除了类名之外的任何东西。不要过分复杂化。：）

将参数从HTML传递到CSS，设计问题少于2个

2 个答案: