html - 具有背景中心的 Css h2 位置

Question

你好，我有我的 H2 的 CSS 代码

rightBox h2 {

background: url(images/lineh2.png) 0px 0px no-repeat;
border-top: 1px solid #e4e4e4;
margin-bottom: 15px;
font-size: 22px;
font-weight: 100;
font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
color: #00b4f0;
display: block;
padding: 10px 0px 0px 0px;

在标题行 40x5px 上方添加，位置向左 0px，我想使用 text-align: center; 将标题移动到中心，但我希望该行也显示在中心但在左 Angular 像这样的文字:

谢谢

Answer 1

您可以考虑在其中应用可以使用渐变简化的背景的 span 元素:

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  text-align:center;
  border-top: 1px solid #e4e4e4;
}
h2 span {
  padding: 10px 0px 0px 0px;
  display:inline-block;
  background:
    linear-gradient(currentColor,currentColor) top left/40px 5px no-repeat;
}

<h2><span>Some text</span></h2>

如果您无法更改 HTML，这里是另一种方式，但不透明:

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  display:flex;
  line-height:45px;
  border-top: 1px solid #e4e4e4;
  background:
    linear-gradient(currentColor,currentColor) top left/50% 5px no-repeat;
}
h2::before,
h2::after{
  content:"";
  flex-grow:1;
  background:#fff;
}

<h2>Some text</h2>