Question

我有一个简单的HTML页面，我希望将Div垂直对齐另一个div。有一种使用定位概念的方法。但我想使用vertical-align属性。下面是我的html和css文件。

我要做的是将<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

Answer 1

您是否尝试过使用表格显示模式？当我做css样式时，我发现垂直对齐可以很好地适应这些技术。

示例：

.title{
    display: table;
}

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

Answer 2

我认为你想要对vertical-align属性做什么并不是它的设计目的，因此不可能。本文解释了原因： Vertical Alignment

div vertical-align不工作

2 个答案: