Question

我试图使div（“＃conteudo_produtos3_txt”）在另一个div（“＃conteudo_produtos3”）的中间垂直对齐，该div的高度由其内部的img确定。

我尝试在容器上使用display：table并显示：table-cell; vertical-align：内部div中间，但不起作用。

我可以只使用CSS吗？

继承人HTML：

<div id="conteudo_produtos3">
    <img width="100%" src="imagens/conteudo_produtos3.jpg" />
    <div id="conteudo_produtos3_txt">
        <h1>b. clue</h1>
        <p>ideal para perfumar ambientes pequenos.<br>
        <br>
        alcance:<br>35 m² (100 m³)<br>
        <br>
        duração do refil:<br>15 a 60 dias;<br>
        <br>
        alimentação:<br>3 pilhas AA;<br>
        <br>
        programação:<br>dias x horas x intervalo de aspersão x volume por aspersão.</p>
    </div>
</div>

CSS：

#conteudo_produtos3{ position:relative; width:100%; display:table; }

#conteudo_produtos3_txt{ position:absolute; left:20%; font-family:moskauLight; text-align:left; display:table-cell; vertical-align:middle; z-index:2; }

Answer 1

试试这个：

#conteudo_produtos3_txt {
position: absolute;
top: 50%;
left: 50%;
tex-align:center;
margin-top: -100px;
margin-left: -200px;

}

margin-top和margin-left可以根据您的需要进行调整。

Answer 2

你可以尝试：

#conteudo_produtos3_txt {
    font-family:moskauLight; 
    left:20%; 
    position:absolute;
    text-align:left;
    top: 50%; 
    transform: translateY(-50%); 
    z-index:2; 
}

Answer 3

你总是可以在内部div的margin-top属性上使用calc()函数。将其设置为50％减去图像高度的一半。

例如，如果图像的高度为300px，则可以将margin-top属性设置为

#conteudo_produtos3_txt {
  margin-top: calc(50% - 150px);
}

应该在图像中垂直对齐。

Answer 4

你应该使用padding：auto for outer div或margin：auto for child div

CSS v-align绝对div在相对div内，其高度由img里面决定

4 个答案: