html – 在较小的div内水平对齐div

概述我有一个div,我需要在另一个div下显示,但随着页面大小的改变,它会水平对齐.更改页面大小会更改第一个div的大小. 我想将.div2放在.div1下面并且居中对齐. 我创建了a fiddle以更清楚地显示我在寻找什么. HTML <div class="container"> <img src="http://jamesonstarship.files.wordpress.com/20 我有一个div,我需要在另一个div下显示,但随着页面大小的改变,它会水平对齐.更改页面大小会更改第一个div的大小.

我想将.div2放在.div1下面并且居中对齐.

我创建了a fiddle以更清楚地显示我在寻找什么.

HTML

<div >    <img src="http://jamesonstarship.files.wordpress.com/2013/10/beautiful-cat-cats-16096437-1280-800.jpg" />    <div >        <div  >            <div >            </div>            <div >                There is some content here            </div>        </div>        <div  >            <div >            </div>            <div >                There is some content here            </div>        </div>    </div></div>

CSS

.container {    wIDth:100%;    display: inline-block;    position: relative;}.container img {    wIDth:100%;}.floating {    position:absolute;}.div1 {    border: 3px solID #FFF;    border-radius: 3px;    wIDth: 100%;    height: 100%;}.div2 {    background: rgba(255,255,0.4);    wIDth: 75px;}

一直试图解决这个问题几个小时,所以真的很感激一些帮助！

解决方法 作为纯CSS解决方案,您可以使用％值作为< div>的宽度.元素,并为第二个div设置一个负余量 – 如下：

.div1 {    wIDth: 100%;}.div2 {    wIDth: 300%;    margin-left: -100%; /* <-- (300% - 100%) / 2                                 |      |       wIDth of the current div --      -- wIDth of the first div */}

此外,您需要使用box-sizing: border-box;作为第一个div来计算元素的宽度/高度,包括白色边框：

.div1 {    -webkit-Box-sizing: border-Box;    -moz-Box-sizing: border-Box;    Box-sizing: border-Box;}

这是WORKING DEMO.

div具有固定宽度

保留第二个div有两个选项(我为演示创建了一个名为.div3的新类),它在中心有一个固定的宽度.

1)使用CSS3 calc()函数计算左边距的正确值.

.div3 {    wIDth: 150px;    margin-left: calc((100% - 150px) / 2); /* <-- -1 * (150px - 100%) / 2 */}

UPDATED DEMO.

2)使用CSS3 translateX()变换函数,负值百分比值为-50％,而元素位于左侧：50％;

.div3 {    wIDth: 150px;    position: relative;    left: 50%;    transform: translateX(-50%);}

UPDATED DEMO.

总结

以上是内存溢出为你收集整理的html – 在较小的div内水平对齐div全部内容，希望文章能够帮你解决html – 在较小的div内水平对齐div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。