css - vertical align into

Question

I'd like to vertical align a <p> block into <div> one. But vertical-align: middle doesn't work...

I tried other workarounds founded on the net, but don't work too...

Have you any idea how to vertical align text?

Here the page i'm working: http://jsfiddle.net/x4zxwd67/

This is the html code:

<div id="contenit">
<a class="homelink" href="#"><div id="Blocco1"> <p class="homemenu">Gomme in Casa</p></div></a>
<a class="homelink" href="#"><div id="Blocco2"> <p class="homemenu">Gomme in Deposito</p></div></a>
<a class="homelink" href="#"><div id="Blocco3"> <p class="homemenu">Admin</p></div></a>
<a class="homelink" href="#"><div id="Blocco4"> <p class="homemenu">Prova</p></div></a>
</div>

and here CSS:

html, body {
  height: 100%;   /* queste due sono essenziali */
  width: 100%;
  overflow: hidden;   /* o vedi tu che valore dare - conviene in questo caso definire l'overflow */
}

#contenit {
  height: 100%;   /* queste due sono essenziali */
  width: 100%;
  position: absolute;   /* o anche relative */
  overflow: hidden;
  background: white;    /* questo e` per le prove */
}
#contenit div {
  position: absolute;
  width: 30%;   /* supponendoli grandi uguali */
  height: 30%;
  background: blue;
}

#Blocco1 {
  left: 11%;    /* un terzo dello spazio libero dai blocchi */ 
  top: 8%;
  text-align: center;
}
#Blocco2 {
  left: 55%;
  top: 8%;
  text-align: center;
}
#Blocco3 {
  left: 11%;
  top: 55%;
  text-align: center;
}
#Blocco4 {
  left: 55%;
  top: 55%;
  text-align: center;
}

I'd like to vertical align white text into blue div.

Answer 1

You can use display: table trick:

html, body {
    height: 100%;
    /* queste due sono essenziali */
    width: 100%;
    overflow: hidden;
    /* o vedi tu che valore dare - conviene in questo caso definire l'overflow */
}
#contenit {
    height: 100%;
    /* queste due sono essenziali */
    width: 100%;
    position: absolute;
    /* o anche relative */
    overflow: hidden;
    background: white;
    /* questo e` per le prove */
}
#contenit div {
    position: absolute;
    width: 30%;
    /* supponendoli grandi uguali */
    height: 30%;
    background: blue;
    display: table;
}
#Blocco1 {
    left: 11%;
    /* un terzo dello spazio libero dai blocchi */
    top: 8%;
    text-align: center;
}
#Blocco2 {
    left: 55%;
    top: 8%;
    text-align: center;
}
#Blocco3 {
    left: 11%;
    top: 55%;
    text-align: center;
}
#Blocco4 {
    left: 55%;
    top: 55%;
    text-align: center;
}
.homemenu p {
    color: white;
}
a:link {
    color: white;
    text-decoration: none;
}
a:visited {
    color: white;
    text-decoration: none;
}
a:hover {
    color: white;
    text-decoration: none;
}
a:active {
    color: white;
    text-decoration: none;
}
p {
    display: table-cell;
    vertical-align: middle;
}

<div id="contenit"> <a class="homelink" href="#"><div id="Blocco1"> <p class="homemenu">Gomme in Casa</p></div></a>
 <a class="homelink" href="#"><div id="Blocco2"> <p class="homemenu">Gomme in Deposito</p></div></a>
 <a class="homelink" href="#"><div id="Blocco3"> <p class="homemenu">Admin</p></div></a>
 <a class="homelink" href="#"><div id="Blocco4"> <p class="homemenu">Prova</p></div></a>

</div>

Answer 2

You can accomplish this by adding this css below. Here's an example

p {position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}