主页 / 问题 / 767976
Accepted
Mr_Epic
Asked:2020-01-08 20:31:05 +0000 UTC2020-01-08 20:31:05 +0000 UTC

如何将按钮与中心对齐，并相对于它已经定位文本？

  • 772

示例：

<div>
  <span>текст</span>
  <button>000|000</button>
  <span>длинный текст</span>
</div>

在此处输入图像描述

您需要将按钮定位在屏幕中央，并且文本已经相对于按钮，将其分开 10px。也就是说，无论文本如何，按钮都应该位于块的中心。如何实施？

html

1 个回答

  1. Best Answer

    我们在Flex上进行。

    .container {
  display: flex;
  justify-content: space-around;
}

.item1 {
  width: calc(100% / 2 - 50px);
  text-align: right;
  padding-right: 10px;
}

.item2 {
  width: calc(100% / 2 - 50px);
  padding-left: 10px;
}

.center {
  width: 50px;
}
    <div class="container">
  <span class="item1">текст</span>
  <button class="center">---|---</button>
  <span class="item2">длинный текст, длинный текст</span>
</div>

    如果事先不知道中心元素的宽度，那么我们在Grid-Layout上进行。

    .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-column-gap: 10px;
}

.item1 {
  text-align: right;
}
    <div class="container">
  <span class="item1">текст</span>
  <button>---|---</button>
  <span>длинный текст, длинный текст</span>
</div>

    • 2

相关问题