如何在<span>中垂直居中文字？

Question

如何垂直居中包含在<span>中的文字？ <span>必须min-height 45px。这就是我想象的：

--------                  -------
text

                --->      text   


--------                  -------

我尝试了vertical-align以及此article中的方法。他们都没有工作

Answer 1

尝试使用flexbox，所有现代浏览器都支持prefixes，它也适用于IE10。

span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}

<span>vertical center</span>

Answer 2

在使用span时，您只需将显示方法更改为table-cell即可。请记住，如果您要使用div而不是span，则可能需要使用其他方式。

＆＃13;

＆＃13;

span {
  height: 45px;
  border: 1px solid #444;
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<span>text</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃34; old＆＃34;如果您需要对旧浏览器（即IE6和IE7）的真正支持，则使用line-height。此方法仅允许1行文本。

＆＃13;

＆＃13;

span {
    display: inline-block;
    line-height: 100px;
    border: 1px solid red;
}

＆＃13;

<span>vertical center</span>

＆＃13;

＆＃13;

＆＃13;

Answer 4

span{
height: 45px;
display: grid;
align-items: center;
}

Answer 5

span设置为内联显示，您链接到的示例应与设置为显示块的div一起使用。尝试将显示块添加到您的范围，然后按照链接中的建议进行操作。结合它们应该让它发挥作用。 但是，为什么要使用跨度？

Answer 6

如果您需要水平和垂直对齐span元素内的文本，您还可以尝试内联网格显示。

span.verticallycentered{
    display: inline-grid;
    align-items: center;
    text-align: center;
    font-size:20px;
    min-width:300px;
    max-width:300px;
    min-height:150px;
    margin: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid black;
    background-color: silver;
}

<span class='verticallycentered'>vertically and horizontally centered text spanning over more than just one line</span>

Answer 7

您可以根据应用程序支持的浏览器，通过以下任何方法实现垂直中心文本对齐。

function getValueAsSeconds(range) { var value = range.getValue(); // Get the date value in the spreadsheet's timezone. var spreadsheetTimezone = range.getSheet().getParent().getSpreadsheetTimeZone(); var dateString = Utilities.formatDate(value, spreadsheetTimezone, 'EEE, d MMM yyyy HH:mm:ss'); var date = new Date(dateString); // Initialize the date of the epoch. var epoch = new Date('Dec 30, 1899 00:00:00'); // Calculate the number of milliseconds between the epoch and the value. var diff = date.getTime() - epoch.getTime(); // Convert the milliseconds to seconds and return. return Math.round(diff / 1000); } function getValueAsMinutes(range) { return getValueAsSeconds(range) / 60; } function getValueAsHours(range) { return getValueAsMinutes(range) / 60; }

1）使用display：inline-flex; （如果你的目标是Chrome，safari，IE11等以上的现代浏览器，你可以选择flex） 检查：我可以使用https://caniuse.com/#search=inline-flex

<span class="vertical-center">Center Text</span>

2）使用display：table-cell; （如果你的目标是旧的浏览器，就像IE9一样，请采用第二种方法）

.vertical-center {
  display: inline-flex;
  border: 1px solid #ddd;
  min-height: 100px;
  align-items: center;
}

演示：JSFiddle