6

我是 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;
}

http://jsfiddle.net/ubd9W/

我试图在黑匣子内将红色圆圈（水平和垂直）居中，但我似乎无法管理它。我尝试使用“文本对齐”并将左右边距设置为自动，但这不起作用。我也不能使用“绝对”定位，因为我在页面顶部有一个固定的菜单栏，如果你滚动它就会被破坏。

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

4

5 回答 5

15

使用您提供的相同代码非常容易理解，您只需给父元素一个 text-align:center; 和一个 位置：相对；

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

然后设置子边距：10px 自动；和显示：内联块； 

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

或者，如果您想要它们之间的更多边距，请更改边距：10px 自动；到边距：10px 40px；

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

于 2013-08-26T20:42:01.157 回答
0

另一个使用 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;
}

链接到小提琴

于 2013-08-26T20:43:17.487 回答
0

对于水平对齐：使用text-align: center;+display:inline-block;

对于垂直对齐：使用line-height+vertical-align: middle;

小提琴

CSS

.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 */
}
于 2013-08-26T22:12:52.157 回答
0

我认为您不能仅使用 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")
})

我们遍历所有行并查看其中有多少个圆圈，并将它们的数量乘以圆圈的宽度，这样我们就可以减去左/右填充。

于 2013-08-26T19:42:03.660 回答
0

使用 flexbox 是迄今为止最好的选择，但现在 ie<10 http://caniuse.com/#feat=flexbox支持它

如果您需要它在不支持 flexbox 的浏览器上工作，水平对齐很容易，您可以添加属性 display: inline on .circle 和 text-align: center on .row。

http://jsfiddle.net/BTh2t/2/

.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 属性以及顶部和底部边距，因此分配的百分比有意义并分配相对于圆形类的位置，因此我们可以使用剩余百分比的一半使用顶部属性例如：圆高度 = 70%，圆顶部 = 15%

http://jsfiddle.net/BTh2t/3/

.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 类的高度，圆的高度将自动增加。

我希望它有帮助！

于 2013-08-26T20:32:52.217 回答