我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中？
使用CSS 3,有没有办法垂直对齐块元素？你有一个例子吗？谢谢.
我试图垂直居中body(不是水平).此外,我不想指定高度或类似的东西.我尝试添加一个100%高度和其他东西的包装,但无处可去.你能帮帮我解决这个问题吗？
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
<input type="text" placeholder="Email"/><br>
<input type="text" placeholder="Username"/><br>
<input type="password" placeholder="Password"/><br>
<button type="submit">Next</button>
</form>?
我试图在布局上使用vertical-align:middle有时垂直居中文本,有时是图像,但它只适用于文本.谁能告诉我为什么？
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/我创造了一个小提琴
我希望将文本垂直和水平居中放在页面变宽时生长的图像上.
我最初将图像设置为固定高度div的背景,在这种情况下,它相对容易居中,但由于背景图像不是结构,我无法将高度设置为自动函数宽度,当我选择更具响应性的设计时,我不得不抛弃这个选项.
所以我现在有一个包含两个元素的div,即img和overlay文本.图像宽度设置为其容器宽度的100%,高度也相应变化.因此,我不能将叠加文本设置为postion :absolute和top:80px或者其他东西,因为距离顶部的距离必须变化.甚至做顶部:25%或其他任何不起作用,因为a)如果页面宽度缩小以挤压文本,或者如果只有更多文本,则当有更多/更少的行时,垂直居中将被抛弃,并且b )百分比是任意的 - 它不是50或者其他东西,因为当我希望叠加的中心在那里时,这会使文本的顶部覆盖50%的图像.
除了其他方面,我看过这个帖子,它肯定很接近 - 但在两个解决方案中,图像高度无法调整大小,而在前者中,JS在页面加载时加载,但随后会冻结,以便如果我改变页面宽度/高度,事情就会变得糟糕.理想情况下,这个解决方案不会因为这个原因而涉及JS(即使它重新加载每个调整大小,感觉不理想),但如果这是唯一的解决方案,我会接受它.
另外,为了增加细节/乐趣,我在图像上设置了最大高度,因为即使在电影院显示器上,我也不希望它超过大约300px的高度.
当前尝试的基本小提琴,以及下面相同的代码.有任何想法吗？谢谢!
HTML
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
CSS
.quotation_div {
position: relative;
display: table;
}
img {
width: …我正在尝试使用水平容器,填充可变大小的文本.如果文本很短,则容器应具有最小高度并垂直居中.如果文本较长,容器应增加其高度,保持垂直和底部边距.