主页 / 问题 / 732671
Accepted
andreymal
Asked:2020-10-18 22:26:38 +0800 CST2020-10-18 22:26:38 +0800 CST

复杂元素的基线对齐

  • 772

我有一个行，行中有一堆不同背景和不同文本大小的元素，有两个任务：

  • 将这些元素的背景拉伸到行的全高

  • 将所有文本与基线对齐（由于底部有边框，因此有必要将其稍微移至块中心下方，使其看起来居中）

也就是说，我想要这样的东西：

最初，我用许多填充物愚蠢地做到了这一点，但后来有必要制作具有可变高度的自适应布局，并且支持填充物已经是某种地狱。将需要更少的拐杖，以便可以任意改变线的高度，同时没有任何东西分开。

另外，这两个任务要解决 - 只是吐。您可以将块拉伸到它们的全高，但是文本的垂直对齐方式会移出。您可以垂直对齐文本，但无法拉伸背景。这是我无法弄清楚如何一次解决所有问题的问题。

对齐但没有背景的片段：

.myblock {
  background-color: #fdd;
  height: 44px;
  border-bottom: 15px solid #ccf;
}

.myitem {
  display: inline-block;
  vertical-align: baseline;
  background-color: #ddf;
}

.myitem1 {
  font-size: 14px;
}

.myitem2 {
  font-size: 28px;
  margin-top: 10px;
}

.myitem3 button {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  background-color: white;
}
<div class="myblock">
  <div class="myitem myitem1">Мелкие букофки</div>
  <div class="myitem myitem2">Бальщие букафки</div>
  <form class="myitem myitem3">
    <button>quit</button>
  </form>
</div>

html

3 个回答

  1. 让它通过显示：灵活，不要受苦。将文本放在 P 标签中并用另一个 div 包装。首先对齐 Myitem div，然后对齐其中的文本。

    • 1

  2. 该死的，我开始按照建议做，它不起作用:))

    试试这样：

        .myblock {
      background-color: #fdd;
      height: 44px;
      border-bottom: 15px solid #ccf;
     overflow: hidden;
     margin-top: 10px;
      
    }
    .myitem {
        background-color: #ddf;
       display: flex;
       align-items: flex-end;
       
    }
    .myitem1 {
      height: 29px;
      font-size: 14px;
    }
    .myitem2 {
      font-size: 28px;
     
    }
    .myitem3 button {
      height: 29px;
      margin: 0;
      padding: 0;
      border: 0;
      font-family: inherit;
      font-size: 18px;
      background-color: white;
    }
    p {
      position: relative;
    }
    .myblock {
      display: flex;
      align-items: center;
    }
        <div class="myblock">
      <div class="myitem myitem1 ">
         <div>Мелкие букофки</div>
         </div>
      <div class="myitem myitem2">
        <div>Бальщие букафки</div>
      </div>
      <div>
        <form class="myitem myitem3">
          <div>
            <button>quit</button>
          </div>
        </form>
      </div>
    </div>

    这当然是完全的拐杖，但至少是一些东西。没错，按钮没有中毒。也许css大师可以提供帮助。

    • 0
  3. Best Answer

    经过数小时的反思，我找到了解决问题的方法。要点是这样的：

    • 我们设置了所需的容器font-size，并line-height在它们的帮助下设置了基线的位置。

    • 在里面，我们把 's 推div到容器一样高的地方。font-size并且line-height像基线本身一样被继承。背景完全设置在这里，结果是全高。

    • 我们将 's推div入span's，为它们设置所需的字体大小并重置line-height. 由于它span是一个内联元素，因此基线是继承的，无论此处设置的字体大小如何，文本都将与其对齐。

    • 这本可以结束，但我记得我需要一个全高按钮。但是，在按钮中，文本不是与基线对齐，而是与按钮高度相关的中心对齐（至少在 Firefox 中），这就是为什么按钮不断努力离开某个地方的原因。因此，您必须将两个span相互塞入按钮中：第一个将是 inline-block 并拉伸到全高（类似于div上面描述的那个） - 它重置文本的垂直对齐方式；第二个已经包含所需大小的所需文本。按钮本身也被拉伸到最大高度，并且vertical-align: top不能移动到任何地方。

    height之后，您可以通过将容器的,line-height和font-sizey 替换为所需的值来任意更改整个结构的高度。（我没有检查百分比，但我不需要它）。像这样的东西：

    .myblock {
  background-color: #fdd;
  height: 44px;
  border-bottom: 15px solid #ccf;
  font-size: 16px; /* подбирается методом тыка */
  line-height: 59px; /* height + border */
}

.myitem {
  display: inline-block;
  vertical-align: baseline;
  background-color: #ddf;
  height: inherit;
}

.myitem1 > span {
  font-size: 14px;
  line-height: 1.25;
}

.myitem2 > span {
  font-size: 28px;
  line-height: 1.25;
}

.myitem3 button {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  background-color: white;
  height: inherit;
  line-height: inherit;
  font-size: inherit;
  vertical-align: top;
}

.myitem3 button > span {
  display: inline-block;
  height: inherit;
}

.myitem3 button > span > span {
  font-size: 14px;
  line-height: 1.25;
}
    <div class="myblock">
  <div class="myitem myitem1"><span>Мелкие букофки</span></div>
  <div class="myitem myitem2"><span>Бальщие букафки</span></div>
  <form class="myitem myitem3">
    <button><span><span>quit</span></span></button>
  </form>
</div>

    然而，一切看起来都是歪的；如果有人提出更好的解决方案，我很乐意看到。

    • 0

相关问题