div垂直對齊不起作用

我有一個簡單的HTML頁面，我想在另一個div的垂直中間對齊Div。有一種使用定位概念的方法。但我想使用vertical-align屬性。以下是我的html和css文件。div垂直對齊不起作用

什麼，我試圖做的是把<div class='plink'>垂直居中這是內部的 <div class='tiles'>

.plink{ 
    height: 100%; 
    vertical-align: middle; 
}

也沒有工作

index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="icon" href="/favicon.icon" type="image/jpeg"> 
     <link rel="stylesheet" href="style.css" type="text/css"> 
     <title>Some title</title> 
    </head> 
    <body> 
     <main> 
      <h1>Some heading</h1> 
      <hr> 
      <div id="tilescontainer">     
       <div class="tiles" id="tile_1"> 
        <div class="plink"><a href="" target="_blank">some text</a></div> 
       </div> 

       <div class="tiles" id="tile_2"> 
        <div class="plink"><a href="" target="_blank">some text</a></div> 
       </div> 
       <br> 
       <div class="tiles" id="tile_3"> 
        <div class="plink"><a href="" target="_blank">some text</a></div> 
       </div> 
       <div class="tiles" id="tile_4"> 
        <div class="plink"><a href="" target="_blank">some text</a></div> 
       </div> 
      </div> 
     </main> 
    </body> 
</html>

style.css

/*Main style sheet*/ 

main{ 
    height: 600px;text-align: center; 
} 

a{ 
    text-decoration: none; 
} 
/*tilescontainer*/ 

#tilescontainer{ 
    text-align: center;position: relative;top: 10%; 
} 

/*tilescontainer*/ 


/*tiles*/ 
.tiles{ 
    display: inline-block;height: 200px;width: 200px;box-shadow: 2px 2px 2px #808080;margin: 5px;text-align: center;vertical-align: middle; 
} 

/*tile_1*/ 
#tile_1{ 
    background-color: #ff8000; 
} 
#tile_1:hover{ 
    background-color: #808080; 
} 
/*tile_1*/ 

/**/ 
#tile_2{ 
    background-color: #00aced; 
} 
#tile_2:hover{ 
    background-color: #808080; 
} 
/**/ 

/**/ 
#tile_3{ 
    background-color: #82858a; 
} 
#tile_3:hover{ 
    background-color: #808080; 
} 
/**/ 

#tile_4{ 
    background-color: ; 
} 
#tile_4:hover{ 
    background-color: #808080; 
} 

span{ 
    border: 2px solid; 
} 
/*tiles*/

這裏在W3Schools的例子是給我想這link

來源

2014-09-29 vaibhav jain

你爲什麼不嘗試的margin-top：50％喜歡這個http://jsfiddle.net/nekg25eg/ – 2014-09-29 14:32:08

我知道，我只是想知道，爲什麼垂直對齊不能正常工作。但是，無論如何.. – 2014-09-29 14:36:58

您是否嘗試過與該表顯示模式工作？當我在做CSS樣式時，我發現垂直對齊使用這些技術很好。

例子：

.title{ 
    display: table; 
} 

.plink{ 
    display:table-cell; 
    height: 100%; 
    vertical-align: middle; 
}

來源

2014-09-29 14:26:06

我想你想用vertical-align屬性做是不是它的目的是做爲此而不可能。這篇文章解釋了原因： Vertical Alignment

來源

2014-09-29 14:27:31 AHaberl

謝謝你清除我的疑問。 – 2014-09-29 14:34:43

div垂直對齊不起作用

回答

相關問題