如果内容的宽度未知,可以使用以下方法,该方法需要一个额外的元素如果内容的宽度未知,可以使用以下方法假设我们有这两个元素:
- 外部
.外部
(100%宽,假设1000像素宽)--全宽度
- 内部
.内部
(否--没有宽度定义,假设它是300像素宽设置(但可以指定最大宽度)
假设元素的计算宽度分别为1000px和300px。按以下步骤进行:
- 包裹内部的
.内部
里面中心助手.中心帮助器
- 浮子制造商 中心助手;
.中心帮助器
内联块;它的大小与内部的(这使得.内部
制作它300像素300像素宽的).
- 推动中心助手
.中心帮助器
相对于其50%的权利父级(此起源;这将其左侧放置在500像素500像素wrt.外部).
- 拉动推动 内部的
.内部
相对于其剩余50%家长(这个起源;这将其左侧放置在-150像素150像素右中心-助手帮手这意味着它的左边是500-150=350像素350像素wrt.外部).
- 将溢出设置为外面的
.外部
到隐藏防止水平滚动条.
这是CSS演示:
车身{字体:medium sans-serif;}.外部{溢出:隐藏;背景色:狗仔队;}.中心帮助器{显示:嵌入式块;位置:相对;左:50%;背景颜色:宝莱坞;}.内部{显示:嵌入式块;位置:相对;左:-50%;背景色:小麦;}
<div class=“outer”><div class=“center-helper”><div class=“内部”><h1>没有定义宽度的div</h1><p>Lorem ipsum悲哀坐在amet,奉献敬爱的精英<br>Duis调味品是一种非turpis consectetur blandit调味品<br>Donec dictum risus id orci ornare tempor的名言<br>Proin pharetra预言了一个lorem elementum molestie<br>Nunc nec就坐在amet nisi temp viverra就坐在一个ipsum</p>(第页)</div></div></div>
.外部{溢出:隐藏;}.中心帮助器{浮动:左;位置:相对;左:50%;}.内部{浮动:左;位置:相对;左:-50%;}
而且这是演示.