简单的方法来集中CSS中的变量宽度div [英] Easy way to center variable width divs in CSS

问题描述

我在这里读到一个相对定位技术：

/ 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屋！