Question

我只想使用CSS [没有弹性框]这样的this居中标题。
[编辑]下面是我使用Flexbox的示例。这段代码有一些局限性，因为标题是在CSS中进行硬编码的，因此我无法再将同一类用于其他标题。将flexbox用于如此小的任务是否是一个好习惯？

body {
  background-color: #0f1932;
}
.wrapper {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 0px;
}
.heading {
  color: white;
}
.heading::before {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  transform: translateX(-50%);
  opacity: 0.06;
  text-transform: uppercase;
  content: "demo-shadow";
}
.heading::after {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40px;
  content: "demo";
  text-transform: uppercase;
  white-space: nowrap;
}

<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>
      <div class="wrapper">
         <header>
            <div class="heading-container">
               <h1 class="heading"></h1>
            </div>
          </header>
      </div>
  </body>
</html>

。

Answer 1

得到解决方案。我必须使用自定义数据属性来显示动态内容。

body {
  background-color: #0f1932;
}
.wrapper {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 0px;
}
.heading {
  color: white;
}
.heading::before {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  transform: translateX(-50%);
  opacity: 0.06;
  text-transform: uppercase;
  content: attr(before-title);;
}
.heading::after {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40px;
  content: attr(after-title);;
  text-transform: uppercase;
  white-space: nowrap;
}

<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>
      <div class="wrapper">
         <header>
            <div class="heading-container">
               <h1 class="heading" after-title="titele1" before-title="titele1"></h1>
               <h1 class="heading" after-title="titele2" before-title="titele2"></h1>
            </div>
          </header>
      </div>
  </body>
</html>

Answer 2

为标题指定宽度（以px或％为单位），并自动设置边距。也是text-align：center;使文本居中。

>>> from itertools import groupby
>>> key = lambda d: d['UserID']
>>> res = [list(grp) for _,grp in groupby(sorted(dict_list, key=key), key)]
>>> 
>>> pprint(res)
[[{'Id': 0, 'Name': 'John', 'UserID': 1},
  {'Id': 2, 'Name': 'Rob', 'UserID': 1},
  {'Id': 3, 'Name': 'Neil', 'UserID': 1}],
 [{'Id': 1, 'Name': 'Martin', 'UserID': 2},
  {'Id': 4, 'Name': 'Bill', 'UserID': 2}]]

如何将文本设置为标题元素的阴影？

2 个答案: