[英]Centre multiple elements within div using css
我是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">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></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;
}
我试图将黑色圆圈(水平和垂直)置于黑框内,但我似乎无法管理它。 我尝试使用'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/
我不认为只有CSS才能实现这一点,没有硬编码值。
您可以使用flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ (不太好的浏览器支持)或JavaScript解决方案。
编辑:
我正在使用jQuery。
对于三个圆圈:
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth - (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");
对于动态数量的圈子:
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
var thisWidth = rowWidth - (circNumber * circleWidth);
jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})
我们遍历所有行并查看它们中有多少个圆圈,并将它们的数字乘以圆的宽度,这样我们就可以减去左/右边距。
使用flexbox它是迄今为止最好的选择,但它现在支持ie <10 http://caniuse.com/#feat=flexbox
如果你需要它在不支持flexbox的浏览器上工作,水平对齐很容易,你可以添加一个属性display:inline on .circle和text-align:center on .row。
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
display: inline-block;
margin: 2px;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
对于垂直对齐,我可以使用百分比来表示圆的高度,并且我更改了box-sizing属性以及顶部和底部边距,因此分配的百分比有意义并且相对于圆类指定位置,因此我们可以使用剩余百分比的一半来使用top属性:circle height = 70%,circle top = 15%
.circle
{
border-style: solid;
border-color: red;
height: 70%;
width: 70px;
border-radius: 40px;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
position: relative;
top: 15%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
请记住,使用此方法,如果增加.row类的高度,圆的高度将自动增加。
我希望它有所帮助!
另一个带display:table属性的简单解决方案:
HTML
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
要添加的CSS:
.wrapper {
display: table;
margin: auto;
}
对于水平对齐 :使用text-align: center;
+ display:inline-block;
对于垂直对齐:使用line-height
+ vertical-align: middle;
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
margin: 2px;
display:inline-block; /* for horizontal alignment */
vertical-align: middle; /* for vertical alignment */
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
line-height: 100px; /* for vertical alignment */
width: 700px;
margin: 10px;
text-align: center; /* for horizontal alignment */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.