Question

我们尝试将CSS圈子与图像和覆盖圆圈的标签对齐。圆应该在引导列中水平居中。目标是让这个圆圈始终在水平中心。欢迎任何建议。

请参阅以下JSFIDDLE

<div class="container">
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <div class="circle1Wrapper">
            <div class="circle-textSmall bubble1outer">
                <div> <span class="bubbleIconSmall">
                        <img src="http://lorempixel.com/40/40/" />
                    </span><span class="bubbleHeadSmall">label</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

CSS：

.circle1Wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
    margin: auto;
    border: 1px solid;
}
.bubble1outer {
    position: absolute;
}
.circle-textSmall div {
    width: 125px;
}
.circle-textSmall div {
    float: left;
    width: 250px;
    padding-top: 15%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    color: #000;
}
span.bubbleIconSmall > img {
    width: 45%;
    height: auto;
}
.circle-textSmall:after {
    width: 125px;
    padding-bottom: 125px;
    margin-left: 50%;
}
.circle-textSmall:after {
    content:"";
    display: block;
    width: 250px;
    height: 0;
    padding-bottom: 250px;
    background: #ccc;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

它应如下所示： enter image description here

Answer 1

@metaxos，我想把它作为评论，但它有点长。

即使您找到适合您的解决方案，我认为您可能需要考虑稍微清理一下该代码;看看原始示例如何摆脱大部分代码并保留一个div：

.innerwrapper是不必要的（为什么不将这种风格直接放在#myCircleDiv上？）;
保存图像的div也是一样（你可以将这种风格直接放在图像上！）;
img本身也可以（并将其用作#myCircleDiv的背景）。

这是我的意见（随意忽略它），但我认为你的目标应该是更清洁，更容易维护，而不是更复杂和精心（但不必要）的结构（除非用户需要/顾客）。越简单越好。

从这个意义上讲，这是（you can see it working on this jsfiddle）：

<!-- HTML -->
<div id="myCircleDiv">LABEL</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    line-height:375px;
    text-align:center;
    color:white;
    background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}

看起来比这更好：

<!-- HTML -->
<div id="myCircleDiv">
    <div class="innerWrapper">
        <div>
            <img src="http://lorempixel.com/50/50/" />
        </div>
        <div>LABEL</div>
    </div>
</div>

/* CSS */
#myCircleDiv {
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    background-color:#ccc;
    background-size:250px 250px;
    line-height:250px;
    text-align:center;
    color:white;
}

.innerWrapper {
    width: 100%;
    height: 250px;
}
.innerWrapper div {
    float: left;
    height: 125px;
    width: 100%;
    line-height: 125px;
}

.innerWrapper div img {
    margin-top: 38px;
}

结果是相同的。但是，再次......那是我的意见:)。

bootstrap列中的水平中心css圈

1 个答案: