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垂直对齐不起作用

回答

相关问题