Question

我正在研究一种游戏的CSS布局，它会在屏幕的顶部，右侧，底部或左侧交替出现图像或字母。我有一个与图像一起工作的布局。图像与视口边缘之间的空间应保持不变：

html {
  height: 100%; }

body {
  font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 1em;
  overflow: auto;
  height: 100%; }

#targetcontainer {
  position: relative;
  overflow: hidden;
  height: 100%; }

.target {
  position: absolute;
  font-size: 4rem;
  font-size: 20vw; }

.top img, .bottom img {
  max-width: 25%; }

.top img, .top span {
  vertical-align: top;
  margin: 0; }

.bottom img {
  vertical-align: bottom; }

.left img, .right img {
  max-width: 50%; }

.top {
  top: 0%;
  width: 100%;
  text-align: center; }

.right {
  right: 0%;
  width: 50%;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  /* IE */
  -moz-transform: translateY(-50%);
  /* Firefox */
  -webkit-transform: translateY(-50%);
  /* Safari and Chrome */
  -o-transform: translateY(-50%); }

.bottom {
  bottom: 0%;
  width: 100%;
  text-align: center; }

.left {
  left: 0%;
  width: 50%;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  /* IE */
  -moz-transform: translateY(-50%);
  /* Firefox */
  -webkit-transform: translateY(-50%);
  /* Safari and Chrome */
  -o-transform: translateY(-50%); }

<body>
        <div id="targetcontainer">
          <div class="target top">
            <a href="#">
              <img src="https://placem.at/things?w=100" />
            </a>
          </div>
          <div class="target right">
            <a href="#">
              <img src="https://placem.at/things?w=100" />
            </a>
          </div>
          <div class="target bottom">
            <a href="#">
              <img src="https://placem.at/things?w=100" />
            </a>
          </div>
          <div class="target left">
            <a href="#">
              <img src="https://placem.at/things?w=100" />
            </a>
          </div>
        </div>
    </body>

然而，当我用字母替换顶部图像时，我无法弄清楚如何将字母垂直对齐到其容器的顶部 - 尽管vertical-align: top;，它仍然与中间对齐。缩放浏览器宽度时，您可以看到字母“A”与视口顶部的距离发生了变化（在Chrome版本62.0.3202.94，Mac OS 10.11.3中）。

html {
      height: 100%; }

    body {
      font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #333;
      display: block;
      position: relative;
      box-sizing: border-box;
      padding: 1em;
      overflow: auto;
      height: 100%; }

    #targetcontainer {
      position: relative;
      overflow: hidden;
      height: 100%; }

    .target {
      position: absolute;
      font-size: 4rem;
      font-size: 20vw; }

    .top img, .bottom img {
      max-width: 25%; }

    .top img, .top span {
      vertical-align: top;
      margin: 0; }

    .bottom img {
      vertical-align: bottom; }

    .left img, .right img {
      max-width: 50%; }

    .top {
      top: 0%;
      width: 100%;
      text-align: center; }

    .right {
      right: 0%;
      width: 50%;
      text-align: right;
      top: 50%;
      transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      /* IE */
      -moz-transform: translateY(-50%);
      /* Firefox */
      -webkit-transform: translateY(-50%);
      /* Safari and Chrome */
      -o-transform: translateY(-50%); }

    .bottom {
      bottom: 0%;
      width: 100%;
      text-align: center; }

    .left {
      left: 0%;
      width: 50%;
      text-align: left;
      top: 50%;
      transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      /* IE */
      -moz-transform: translateY(-50%);
      /* Firefox */
      -webkit-transform: translateY(-50%);
      /* Safari and Chrome */
      -o-transform: translateY(-50%); }

<body>
            <div id="targetcontainer">
              <div class="target top">
                <a href="#">
                  <span class="letter">A</span>
                </a>
              </div>
              <div class="target right">
                <a href="#">
                  <img src="https://placem.at/things?w=100" />
                </a>
              </div>
              <div class="target bottom">
                <a href="#">
                  <img src="https://placem.at/things?w=100" />
                </a>
              </div>
              <div class="target left">
                <a href="#">
                  <img src="https://placem.at/things?w=100" />
                </a>
              </div>
            </div>
        </body>

当在第二个片段中使用字母时，如何根据浏览器宽度保持字体大小的缩放，同时保持距视口顶部的恒定距离？

以下是说明问题的屏幕截图：

如何使文本元素与其容器的顶部对齐

0 个答案: