简单的方法来集中CSS中的变量宽度div [英] Easy way to center variable width divs in CSS
本文介绍了简单的方法来集中CSS中的变量宽度div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里读到一个相对定位技术:
/ p>
http://www.tightcss.com/centering/center_variable_width。 htm
但我认为有更简单的方法吗?
解决方案
这是一个非常稳固的方法,应该在大多数浏览器中正常工作。这不是真的那么复杂,当你打破它。以下是一个基本示例:
< style type =text / css>
#hideoverflow {overflow:hidden; }
#outer {position:relative;左:50%; float:left; }
#inner {position:relative;左:-50%; float:left; }
< / style>
< div id =hideoverflow>
< div id =outer>
< div id =inner>
Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Sed id velit vel augue fringilla rhoncus at et odio。悬浮液。 Aliquam justo libero,commodo utaculis in,placerat vel purus。
< / div>
< / div>
< / div>
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
解决方案
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
这篇关于简单的方法来集中CSS中的变量宽度div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文