垂直对齐：中间和位置：绝对

我想重叠文本。现在我有：http://jsfiddle.net/9DLyE/9/ 但在这个例子中不工作vertical-align：middle。我尝试使用display：table;并显示：table-cell;但是这不适用于绝对位置。我怎样才能让它在http://jsfiddle.net/9DLyE/9/？垂直对齐：中间和位置：绝对

<div id="main"> 
    <div>TITLE</div> 
    <div>BODY</div> 
    <div>COMMENT</div> 
    <div><textarea></textarea></div> 
    <div id="overlay">@@@@@@</div> 
</div> 
<button>overlay</button> 

#main { 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
    position:relative 
} 
#overlay{ 
    background:rgba(0, 84, 214, 0.5); 
    height:100%; width:100%; 
    position:absolute; 
    top:0; left:0; 
    display:none; 
    text-align: center; 
    vertical-align: middle; 
}

来源

2013-06-05 Lars Mandsert

尝试更改#overlay'top：0;'到'top：50％'然后'margin-top：-20px'页边距需要是文本的一半。 – CharlesJHardy

http://stackoverflow.com/questions/8896965/css-vertical-align-table-cell-dont-work-with-position-absolute – Pete

代替vertical-align: middle;给覆盖线高度是一样的你的主要DIV：

#overlay { 
    line-height: 200px; // the height of #main 
}

Demo

来源

2013-06-05 13:49:07

我不喜欢使用在所有的表，但也许你可以做到这一点，至少可以保证它始终处于中间位置。

 <div id="main"> 
    <div>TITLE</div> 
    <div>BODY</div> 
    <div>COMMENT</div> 
    <div><textarea></textarea></div> 
    <div id="overlay"> 
     <table id="wrapper"> 
      <tr> 
       <td>@@@@@@</td> 
      </tr> 
     </table> 
    </div> 
</div> 
<button>overlay</button>

http://jsfiddle.net/9DLyE/9/

有办法用图片做的，但它是一个有点棘手的文本。这里

P.S是表的CSS，你需要

 #wrapper { 
    height:100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#wrapper td { 
    vertical-align: middle; 
    text-align: center; 
}

希望这会有所帮助。

来源

2013-06-05 14:05:18 RustyCollins

**一个人不应该只使用表布局**，当然，没有必要，因为这种样式可以用CSS来实现。 –

但是，如果您在相关元素上设置200px的线高度，那么它不能保证它将对齐到它的容器中间，此方法将确保无论容器的大小如何，它都将始终位于中间，因此肯定会提供一个强大的解决方案？图像更容易居中，但文本仍然很棘手 – RustyCollins

如果将行高设置为等于容器高度，则任何单行都将垂直对齐。当然，还有其他解决方案，或许还有更强大的解决方案，但纯粹用于样式设计的表格布局绝对是错误的方法。 –

垂直对齐：中间和位置：绝对

回答

相关问题