eme*_*his 26 html css html5 css3 responsive-design
我已经看到了关于如何将块元素居中的一百万个问题,并且似乎有几种流行的方法来实现它,但它们都依赖于固定的像素宽度.那么要么是margin:0 auto绝对/相对定位left:50%; margin-left:[-1/2 width];等等.如果元素的宽度设置为%,我们都知道这不起作用.
真的没有办法以真正流畅的方式做到这一点吗？我正在谈论使用%宽度(不设置固定宽度越来越小的十几个媒体查询).
注意:有很多解决方案使用热门词"响应",但不回答我的问题(因为他们无论如何都使用固定宽度).这是一个例子.
更新: 我差点忘了:你如何处理限制居中元素的最大宽度并仍然保持在中心？在@ smdrager的回答下看到我的评论.现实生活中的例子.我想要一个弹出消息或一个灯箱效果,其中包含一段文本在窗口中居中显示,文本根据宽度流畅地换行.但我不希望文本框在文本难以阅读的地方伸展得太远(想象一个4英尺的屏幕,其中三个段落延伸到一行文本上).如果为大多数方法添加最大宽度,则在达到最大宽度时,居中框将停止居中.
smd*_*ger 42
水平和垂直居中
实际上,具有百分比的高度和宽度使得它更容易居中.你只是将左边和顶部偏移了没有被div占据的区域的一半.
所以如果你的身高是40%,那么100% - 40%= 60%.所以你想要30%以上和以下.顶部:30%的诀窍.
请参阅此处的示例:http://dabblet.com/gist/5957545
仅水平居中
使用内联块.然而,这里的另一个答案对IE 8及以下版本不起作用.您必须使用CSS hack或条件样式.这是黑客版本:
请参阅此处的示例:http://dabblet.com/gist/5957591
.inlineblock {
display: inline-block;
zoom: 1;
display*: inline; /* ie hack */
}
通过使用媒体查询,您可以结合使用两种技术来实现所需的效果.唯一的复杂因素是身高.您使用嵌套的div在%width和之间切换
http://dabblet.com/gist/5957676
@media (max-width: 1000px) {
.center{}
.center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
.center{left:50%;top:25%;position:absolute;}
.center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
Bri*_*ips 18
来自Chris Coyier关于居中百分比宽度元素的文章:
不使用负边距,而是使用负
translate()变换.
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
Fir*_*DoL 12
我认为你可以使用display: inline-block你想要居中的元素并text-align: center;在其父元素上设置.这绝对是所有屏幕尺寸的中心.
在这里你可以看到一个小提琴:http://jsfiddle.net/PwC4T/2/我在这里添加代码是为了完整性.
HTML
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
CSS
#container
{
text-align: center;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
对于垂直居中,我"放弃"支持一些旧的浏览器display: table;,这绝对减少代码,看到这个小提琴:http://jsfiddle.net/jFAjY/1/
以下是完整性的代码(再次):
HTML
<body>
<div id="table-container">
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
</div>
</body>
CSS
body, html
{
height: 100%;
}
#table-container
{
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
这种方法的优点是什么？你不必处理任何percantage,它也正确处理<video>标签(html5),它有两种不同的大小(一个在加载期间,一个在加载后,你无法获取标签大小'直到视频加载).
缺点是它丢弃了对一些旧浏览器的支持(我认为IE8无法正确处理)
| 归档时间： |
|
| 查看次数： |
161599 次 |
| 最近记录： |