CSS-<p>垂直对齐<div>

Matteo 发表于 Dev

马泰奥

我想将一个<p>块垂直对齐<div>。但是vertical-align: middle不行...

我尝试了其他基于网络的解决方法，但也无法正常工作...

您知道如何垂直对齐文本吗？

这是我正在工作的页面：http : //jsfiddle.net/x4zxwd67/

这是html代码：

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

这里是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;
}

我想将白色文字垂直对齐为蓝色div。

亚历克斯·查尔

您可以使用display: table技巧：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。