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

Почему бы вам не попробовать маржи-топ: 50%, как этот http://jsfiddle.net/nekg25eg/ –

я знал, что я был просто интересно, почему вертикальные выравнивания не работает. Но спасибо в любом случае .. –

Вы пробовали работать с режимами отображения таблицы? Когда я делаю css styling, я нахожу вертикальное выравнивание, чтобы хорошо работать с этой техникой.

Пример:

.title{ 
    display: table; 
} 

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

источник

2014-09-29 14:26:06

Я думаю, что вы хотите сделать с вертикальной Align собственности не то, что он был разработан, чтобы сделать, и для этого не представляется возможным. Эта статья объясняет, почему: Vertical Alignment

источник

2014-09-29 14:27:31 AHaberl

Спасибо, что освободил мое сомнение. –

div вертикально-выровнять не работает

ответ

Смежные вопросы