Question

我正在使用LESS（CSS）尝试在div（按钮）内对齐span（按钮文本）。跨度水平居中对齐，但垂直对齐。我还希望span对象自动调整为文本大小。

这是LESS代码：

.button(@color:@crimson-red) {
  border-radius: @small-border-radius;
  border-style: none;
  background-color: @color;
  text-align: center;
  display: inline-block;
}

.button-font {
  vertical-align: middle;
  overflow: auto;
  font-family: "Helvetica Neue", sans-serif;
  color: @off-white;
  font-weight: bold;
  font-size: 10pt;
  position: relative;
}

.blue-button {
  .button(@blue);
}

Answer 1

您可以使用flexbox layout来实现此目的。

因此，通过向.button选择器添加以下属性和值，您可以将span置于中心位置。

 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

以下是完整的文件供参考。

@off-white: #fefefe;
@blue: #4286f4;
@small-border-radius: 5px;

.button(@color:@crimson-red) {
  border-radius: @small-border-radius;
  border-style: none;
  background-color: @color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-font {
  font-family: "Helvetica Neue", sans-serif;
  color: @off-white;
  font-weight: bold;
  font-size: 10pt;
  position: relative;
}

.blue-button {
  .button(@blue);
  width: 300px;
  height: 100px;
}

这将是html：

<button class="blue-button">
    <span class="button-font">Hello, lots of text here</span>
</button>

以下是指向已编译css的JSFiddle的链接。

需要使用较少（css）在垂直和水平方向上对齐div中的跨度

1 个答案: