如何將包裹在& ltspan & gt？& ltspan & gt最小高度必須為45px。以下是我的設(shè)想:

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

                --->      text   


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

我嘗試了垂直對(duì)齊以及本文中的方法。它們都不起作用

試試用flexbox，所有現(xiàn)代的瀏覽器都支持，帶前綴的在IE10也能用。

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

<span>vertical center</span>

當(dāng)您使用span時(shí)，您可以簡(jiǎn)單地將顯示方法更改為table-cell。請(qǐng)記住，如果您要使用div而不是span，您可能需要使用另一種方式。

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

<span>text</span>

如果你需要真正支持舊的瀏覽器(即IE6 & ampIE7)，就是使用行高。此方法只允許1行文本。

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

<span>vertical center</span>

根據(jù)您的應(yīng)用程序?qū)⒅С值臑g覽器，您可以通過(guò)以下任何一種方法實(shí)現(xiàn)文本垂直居中對(duì)齊。

& ltspan class= "垂直居中" >居中文本& lt/span>。

1)使用顯示:inline-flex；(如果你的目標(biāo)是Chrome、safari、IE11等現(xiàn)代瀏覽器，你可以選擇flex) 檢查:我能使用https://caniuse.com/#search=inline-flex嗎

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

2)使用顯示:表格單元；(如果你的目標(biāo)也是IE9這樣的老瀏覽器，那就用第二種方法)

.vertical-center-table-cell {
    display: table-cell;
    border: 1px solid #ddd;
    height: 100px;
    vertical-align: middle;
}

演示:JSFiddle

如果您需要在span元素中水平和垂直對(duì)齊文本，您也可以嘗試內(nèi)聯(lián)網(wǎng)格顯示。

span {
display: inline-grid;
align-items: center;
text-align: center;
}

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

span設(shè)置為“內(nèi)聯(lián)顯示”,您鏈接到的示例應(yīng)該與設(shè)置為“顯示塊”的div一起工作。嘗試向您的sp an添加顯示塊，然后按照鏈接中的建議進(jìn)行操作。將它們結(jié)合在一起應(yīng)該能讓它發(fā)揮作用。 但是，為什么要使用span呢？

要在span元素中垂直居中文本，可以使用CSS flexbox。這里有一個(gè)例子:

<style>
  .container {
    display: flex;
    align-items: center; /* vertically center items */
    justify-content: center; /* horizontally center items */
    height: 100px;
    border: 1px solid black;
  }
</style>

<div class="container">
  <span>Vertically centered text</span>
</div>

在本例中，我們創(chuàng)建了一個(gè)高度為100像素、邊框?yàn)?px的容器div來(lái)可視化居中。然后，我們使用display: flex來(lái)啟用flexbox布局，并設(shè)置align-items: center來(lái)垂直居中項(xiàng)目和justify-content: center來(lái)水平居中項(xiàng)目。最后，我們將span元素放入容器中。

這將使span元素中的文本在容器內(nèi)垂直居中。

我嘗試了這個(gè)頁(yè)面上的其他答案，將一個(gè)單詞按鈕實(shí)現(xiàn)為一個(gè)帶邊框的span。

但是由于某種原因，我無(wú)法使跨度內(nèi)的文本與上下邊框的距離完全相同。所以看起來(lái)不太對(duì)。設(shè)置& quot填充:0px"沒有幫助。

將button-label放在一個(gè)內(nèi)部范圍內(nèi)，并通過(guò)相對(duì)定位將其向上移動(dòng)1px，解決了以下問(wèn)題:

<span>  
  <span
   style=" position : relative;
           top      : -1px;
         "
  >MY BUTTON 
  </span>
</span>