Question

我想将<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。

Answer 1

您可以使用display: table技巧：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以通过在下方添加此css来完成此操作。这是 example

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

css - <p>垂直对齐</p> <div> </div>

2 个答案: