h1 相对于父级的中心跨度答案

【问题标题】：Center span of h1 relative to parenth1 相对于父级的中心跨度
【发布时间】：2021-12-31 03:57:50
【问题描述】：

我的目标是能够使“Animal Wildlife”相对于容器居中，同时跨度仍保持在左侧。

<div class="container">
<h1><span>Subscribe to </span>Animal Wildlife</h1>
</div>

如何在保持结构的同时将 h1 的一部分居中？

【问题讨论】：

标签： html css alignment center

【解决方案1】：

中心对象

.container1 {
  display: flex;
  justify-content: center;
  /* center horizontal */
  align-items: center; /* center vertical */
}


/* --------------------------------- */

.container2 {
  width: 100%;
  height: 100%;
}

.container2 h1 {
  width: fit-content;
  margin: auto; /* center both */
}


/* --------------------------------- */

.container3 {
  position: relative;
}

.container3 h1 {
  width: fit-content;
  position: absolute;
  left: 50%; /* center left */
  top: 50%; /* center top */
  transform: translate(-50%, -50%); /* center object */
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container1">
    <h1><span>Subscribe to </span>Animal Wildlife</h1>
  </div>

  <div class="container2">
    <h1><span>Subscribe to </span>Animal Wildlife</h1>
  </div>

  <div class="container3">
    <h1><span>Subscribe to </span>Animal Wildlife</h1>
  </div>
</body>

</html>

【讨论】：

这些解决方案不能解决问题。我基本上想将 h1 的中心点向右更改一点。我希望“订阅”在将 h1 居中时表现得像它不存在一样。不过感谢您的帮助。