css - middle - vertical-align用法




垂直對齊圖像旁邊的文字? (14)

為什麼不vertical-align: middle工作? 然而, vertical-align: top 確實有效。

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

以下是垂直對齊的一些簡單技巧:

一行垂直對齊:中間

這很容易:將文本元素的行高設置為等於容器的行高

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直對齊:底部

絕對放置一個內部div相對於它的容器

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直對齊:中間

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果您必須支持IE <= 7的古老版本

為了讓這一切都能夠正常工作,你必須對CSS進行一些破解。 幸運的是,有一個IE錯誤對我們有利。 設置top:50%容器上的top:50%top:-50%內部div的top:-50% ,可以達到相同的結果。 我們可以結合使用IE不支持的另一個功能:高級CSS選擇器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可變的容器高度vertical-align:middle

該解決方案需要比其他解決方案稍微更現代化的瀏覽器,因為它使用了transform: translateY屬性。 ( http://caniuse.com/#feat=transforms2d

無論父元素的高度如何,將以下3行CSS應用於元素都會將其垂直居中在其父元素中:

position: relative;
top: 50%;
transform: translateY(-50%);

你可以做的另一件事是將文本的line-height設置為<div>圖像的大小。 然後將圖像設置為vertical-align: middle;

這是最簡單的方法。


你必須對這兩個元素應用vertical-align: middle來使它完全居中。

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

接受的答案確實將圖標置於其旁邊文本的x高度的一半(如CSS規範中所定義的)。 如果文本的頂部或底部突出顯示頂部或底部,這可能會足夠好,但看起來可能有點偏離:

在左邊,文本不對齊,在右邊它如上所示。 現場演示可以在這篇關於垂直對齊的文章中找到。

有沒有人談過為什麼vertical-align: top在場景中工作? 問題中的圖像可能比文本高,因此定義了線框的上邊緣。 vertical-align: top span元素上的頂部,然後將它放置在線框頂部。

vertical-align: middletop之間行為的主要區別在於第一個元素相對於box的基線移動元素(放置在需要實現所有垂直對齊並因此感覺不可預測的地方 ),第二個元素相對於外部邊界線框(這是更有形的)。


例如,在jQuery mobile中的一個按鈕上,您可以通過將該樣式應用於圖像來調整它:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

在接受的答案中使用的技術僅適用於單行文本( demo ),但不適用於多行文本( demo ) - 如上所述。

如果有人需要將多行文本垂直居中放置到圖像上,可以採用以下幾種方法(方法1和方法2受此CSS-tricks文章的啟發)

方法#1:CSS表格( FIDDLE )(IE8 +( caniuse ))

CSS:

div
{
    display:table;
}
span
{
    vertical-align: middle;
    display: table-cell;
}

方法#2:容器上的偽元素( FIDDLE )(IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img
{
    position:absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

方法#3:Flexbox( FIDDLE )( caniuse

CSS (上面的小提琴包含供應商前綴):

div {   
    display: flex; 
    align-items: center;    
}
img
{
    min-width: 200px; /* width of image */
}

在這些答案中還沒有看到具有margin的解決方案,所以這裡是我對這個問題的解決方案。

如果您知道圖像的寬度, 此解決方案才有效。

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

多線解決方案:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

適用於所有瀏覽器和ie9 +


實際上,在這種情況下,它非常簡單:將垂直對齊應用於圖像。 由於它全部在一行中,所以它確實是您想要對齊的圖像,而不是文本。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

在FF3中測試。

現在,您可以使用flexbox進行此類佈局。

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


對於記錄,對齊“命令”不應該在SPAN上工作,因為它是一個內聯標記,而不是塊級標記。 諸如對齊,邊距,填充等的內容不能用於內聯標籤,因為內聯點不會中斷文本流。

CSS將HTML標籤分為兩組:嵌入式和塊級。 搜索“CSS塊內聯”和一個偉大的文章顯示...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(理解核心CSS原則是它不太惱人的關鍵)


您可以使用display屬性將圖像設置為inline element

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


為跨度使用line-height:30px ,以便文本與圖像對齊:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

編寫這些跨度屬性

span{
    display:inline-block;
    vertical-align:middle;
}

使用display:inline-block; 當你使用vertical-align屬性。那些是輔助屬性


首先, 內聯CSS不被推薦,它確實會弄亂你的HTML。

為了對齊圖像和跨度,您可以簡單地進行vertical-align:middle

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>


background:url(../images/red_bullet.jpg) left 3px no-repeat;

我通常使用3px代替top 。 通過增加/減少該值,可以將圖像更改為所需的高度。





vertical-alignment