html – 使用css将div中的多个元素居中

概述我是html和css的新手,我正在尝试创建一个网站,部分代码在这里： HTML： <div class="row"> <div class="circle"></div></div><div class="row"> <div class="circle"></div> <div class="circle"></div></div><div class="row" 我是HTML和CSS的新手,我正在尝试创建一个网站,部分代码在这里：

HTML：

<div >    <div ></div></div><div >    <div ></div>    <div ></div></div><div >    <div ></div>    <div ></div>    <div ></div></div><div >    <div ></div>    <div ></div></div><div >    <div ></div></div>

CSS：

.circle{border-style: solID;border-color: red;wIDth: 70px;border-radius: 40px;float:left;margin: 2px;}.row{border-style: solID;border-color: black;height: 100px;wIDth: 700px;margin: 10px;}

http://jsfiddle.net/ubd9W/

我试图将黑色圆圈(水平和垂直)置于黑框内,但我似乎无法管理它.我尝试使用’text-align’并将左右边距设置为自动,但这不起作用.我也不能使用’绝对’定位,因为我在页面顶部有一个固定的菜单栏,如果你滚动就会被破坏.

任何帮助将不胜感激.谢谢

解决方法 使用您提供的相同代码非常简单易懂,您只需要为父元素提供text-align：center;和位置：相对;

.row{        border:4px solID black;        height: 100px;        wIDth: 700px;        margin: 10px;        text-align:center;        position:relative;    }

然后设置子边距：10px auto;并显示：inline-block;

.circle{        border:4px solID red;        height: 70px;        wIDth: 70px;        border-radius: 40px;       position:relative;        margin:10px auto;       display:inline-block;    }

或者如果你想要它们之间有更多的保证金更改保证金：10px auto;保证金：10px 40px;

演示：http://jsfiddle.net/ubd9W/14/

总结

以上是内存溢出为你收集整理的html – 使用css将div中的多个元素居中全部内容，希望文章能够帮你解决html – 使用css将div中的多个元素居中所遇到的程序开发问题。

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