0

I have a simple HTML page in which i want to align Div vertically middle of another div. There is one way of using positioning concept. But i want to use vertical-align property. Below is my html and css files.

What i am trying to do is to place <div class='plink'> vertically centered which is inside of <div class='tiles'>

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

is also not working

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*/

Here at w3schools example is give i tried this link

Niklas
  • 13,005
  • 23
  • 79
  • 119
Vaibhav Jain
  • 5,287
  • 10
  • 54
  • 114

2 Answers2

1

Have you tried working with the table display modes? When I am doing css styling I find vertical alignment to work well with these technique.

Example:

.title{
    display: table;
}

.plink{
    display:table-cell;
    height: 100%;
    vertical-align: middle;
}
sir_k
  • 332
  • 3
  • 18
1

I think what you want to do with the vertical-align property is not what it was designed to do and therefor not possible. This article explains why: Vertical Alignment

AHaberl
  • 328
  • 2
  • 12