css - 需要使用 less(css) 在垂直和水平方向上居中对齐 div 内的跨度

Question

我正在使用 LESS (CSS) 尝试对齐 div(按钮)内的跨度(按钮文本)。跨度水平居中对齐，但顶部垂直对齐。我还希望 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;

这里是完整的 less 文件以供引用。

@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>

这里是一个链接 JSFiddle使用编译后的 CSS。