html - middle - vertical-align用法




我如何垂直居中文本與CSS? (20)

滿足您所有的垂直對齊需求!

聲明這個Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然後將它包含在你的元素中:

.element{
    @include vertical-align();
}

我有一個包含文本的div元素,我想將此div的內容垂直居中對齊。

這是我的div風格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

做這個的最好方式是什麼?


靈活的方法

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


一個非常簡單和最強大的解決方案,垂直對齊中心:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


以下代碼將div放在屏幕中間,無論屏幕大小或div大小如何:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

here查看更多關於flex細節。


你可以嘗試這種基本的方法:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

它只適用於單行文本,因為我們將行的高度設置為與包含框元素相同的高度。

更通用的方法

這是垂直對齊文本的另一種方式。 該解決方案可以用於單行和多行文本,但仍需要一個固定高度的容器:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS只是設置<div>大小,通過設置<div>的行高等於其高度,垂直居中對齊<span> ,並使<span>成為vertical-align: middle的內聯塊。 然後它將<span>的行高設置回正常,因此其內容將在塊內自然流動。

模擬表格顯示

這是另一個選項,它可能不支持不支持display: tabledisplay: table-cell (基本上只是Internet Explorer 7)的舊瀏覽器 。 使用CSS我們模擬表格行為(因為表格支持垂直對齊),HTML與第二個例子相同:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

使用絕對定位

這項技術使用絕對定位的元素設置頂部,底部,左側和右側為0.它在Smashing Magazine, CSS中的絕對水平和垂直居中的文章中有更詳細的描述。


其他方式:

不要設置divheight屬性,而是使用padding:來實現效果。 與行高一樣,它只適用於有一行文字的情況。 雖然這樣,如果你有更多的內容,文本仍然會居中,但是div本身會稍微大一些。

所以,而不是與:

div {
  height:120px;
  line-height: 120px;
}

你可以說:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

這會將div的頂部和底部padding設置為60px ,並將左側和右側padding設置為零,使div 120px(加上字體的高度)變高,並將文本垂直居中放置在div中。


嘗試此解決方案

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

使用CSS +構建。


嘗試transform屬性:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


在CSS3中引入的Flexbox是解決方案:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

注意 :如果要將文本居中,請將上面標記為重要的行替換為以下行之一:

1)僅垂直:

margin: auto 0;

2)只有水平方向:

margin: 0 auto;

如果你不關心它的小視覺3d效果,將它設置在button而不是div

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


您可以使用下面的代碼片段作為參考。 它對我來說就像是一種魅力:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>
        <body style="background:#3cedd5">
        <div class="centered-text">
          <h1>Yes It's My landing Page</h1>
    	  <h2>Under Construction, Coming Soon !!!</h2>
        </div>
        </body>
    </html>

上面的代碼片段的輸出如下:

源代碼信用: codepuran.com/web-designing/… codepuran.com/web-designing/…


您可以通過添加以下一段CSS代碼輕鬆完成此操作:

display: table-cell;
vertical-align: middle;

這意味著你的CSS最終看起來像:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


我不確定是否有人走過writing-mode路線,但我認為它能夠乾淨地解決問題並得到廣泛的支持

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

當然,這將適用於您需要的任何尺寸(除了家長的100%)。 如果您取消註釋邊界線,則可以幫助您熟悉自己。

JSFiddle演示讓你小提琴。

Caniuse支持 :85.22%+ 6.26%= 91.48% (即使IE在!)


我只想擴展@michielvoo的答案,以釋放對線高和呼吸高度的需求。 它基本上就是這樣的簡化版本:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

注意:註釋掉部分css是封閉div fixed-height需要的。


我需要一排可點擊的大象,垂直居中,但沒有使用表格來解決某些Internet Explorer 9的怪異問題。

我最終找到了最好的CSS(滿足我的需求),並且在Firefox,Chrome和Internet Explorer 11中表現出色。可悲的是,Internet Explorer 9仍在嘲笑我......

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

顯然你不需要邊界,但他們可以幫助你看到它的工作原理。


所有功勞歸於這個鏈接的擁有者@SebastianEkströmLink; 請通過這個。 在action codepen看到它。 通過閱讀上面的文章,我也創建了一個演示小提琴

只需要三行CSS(不包括供應商前綴),我們可以在變換的幫助下完成:即使我們不知道它的高度,translateY也會垂直居中。

CSS屬性轉換通常用於旋轉和縮放元素,但通過translateY函數,我們現在可以垂直對齊元素。 通常這必須通過絕對定位或設置線條高度來完成,但這些要求您要么知道元素的高度,要么只能處理單行文本等。

所以,為了做到這一點,我們寫道:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

這就是你需要的。 這是一種類似於絕對位置方法的技術,但有利的一點是,我們不必在父元素或位置屬性上設置任何高度。 即使在Internet Explorer 9中,它也可以直接使用!

為了使它更簡單,我們可以把它作為一個mixin與它的供應商前綴一起編寫。


簡單而通用的方式是(如michielvoo表格方式):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

在父標籤上使用此屬性(或同等類)即使對許多孩子也可以對齊:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

解決方案被接受為答案是完美的使用line-height與div的高度相同,但是當文本被包裝或兩行時,此解決方案不能很好地工作。

如果文本被包裝或者在div內的多行上,請嘗試使用這一項。

#box
{
  display: table-cell;
  vertical-align: middle;
}

有關更多參考,請參閱:


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>




vertical-alignment