Html 带有图像和文本的响应圆

我试图用嵌入的徽标和文本构建下面的圆圈。我一直在使用Bootstrap来提高响应能力，这篇文章也需要跟进。我目前遇到了几个问题：

1） 当有多个句子时，文本保持在一行，不换行

2） 无法嵌入必要的徽标或按钮

下面是HTML和CSS

.circle{
宽度：100%；
边界半径：50%；
文本对齐：居中；
字体大小：12px；
填充：50%0；
线高：0；
位置：相对位置；
背景：#38a9e4；
颜色：白色；
字体系列：Helvetica，Arial黑色，sans；
}

文本文本文本

至于你的第一期，如果你想让每一句话都单独排在一行，请使用换行符，

如果您只想将文本换行，请将文本放入

标记或

标记中，以便定义宽度。这样，当它到达元素的宽度时，它将被包裹。

您没有说希望在较小的视口上执行什么操作。在这里，它堆叠并居中，因为在较小的视口中，如果内容不太小，也不好看，就无法容纳一个圆

演示：

CSS:

body {
    background: #777;
    padding: 5% 0;
}

.feature {background:pink;padding:10% 0}
.circle .btn {
    border-radius: 40px;
    background: #000;
    border: #000;
}
.circle {
    width: 100%;
    padding: 10%;
    background: white;
    border-radius: 50px;
}
.circle-wrapper {
    margin: 0 5%;
    position: relative;
}
.circle .list-inline {
    font-size: 0px;
    margin: 0;
}
.circle .list-inline li {
    font-size: 20px;
    display: block;
}
.circle p {
    padding-top: 10%;
    margin: 0;
}
@media (min-width:460px) { 
    .circle .list-inline li {
        font-size: 50px;
        display: inline-block;
    }
    .circle-wrapper {
        max-width: 450px;
        position: relative;
        margin:0 auto;
    }
    .circle {
        height: 0px;
        padding: 50%;
        border-radius: 50%;
    }
    .circle > div {
        position: absolute;
        text-align: center;
        left: 10%;
        right: 10%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top:20%\9; /* ie8 hack test this out it's a guess */
    }
}

<section class="feature">

<div class="circle-wrapper">
   <div class="circle text-center">
      <div>
         <ul class="list-inline">
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+1" alt=""></li>
            <li class="plus">+</li>
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+2" alt=""></li>
         </ul>
         <p>content goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes here goes herecontent goes herecontent goes here</p>
         <p><a href="#" class="btn btn-primary">Button Goes Here</a></p>
      </div>
   </div>
</div>


</section>

HTML:

body {
    background: #777;
    padding: 5% 0;
}

.feature {background:pink;padding:10% 0}
.circle .btn {
    border-radius: 40px;
    background: #000;
    border: #000;
}
.circle {
    width: 100%;
    padding: 10%;
    background: white;
    border-radius: 50px;
}
.circle-wrapper {
    margin: 0 5%;
    position: relative;
}
.circle .list-inline {
    font-size: 0px;
    margin: 0;
}
.circle .list-inline li {
    font-size: 20px;
    display: block;
}
.circle p {
    padding-top: 10%;
    margin: 0;
}
@media (min-width:460px) { 
    .circle .list-inline li {
        font-size: 50px;
        display: inline-block;
    }
    .circle-wrapper {
        max-width: 450px;
        position: relative;
        margin:0 auto;
    }
    .circle {
        height: 0px;
        padding: 50%;
        border-radius: 50%;
    }
    .circle > div {
        position: absolute;
        text-align: center;
        left: 10%;
        right: 10%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top:20%\9; /* ie8 hack test this out it's a guess */
    }
}

<section class="feature">

<div class="circle-wrapper">
   <div class="circle text-center">
      <div>
         <ul class="list-inline">
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+1" alt=""></li>
            <li class="plus">+</li>
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+2" alt=""></li>
         </ul>
         <p>content goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes here goes herecontent goes herecontent goes here</p>
         <p><a href="#" class="btn btn-primary">Button Goes Here</a></p>
      </div>
   </div>
</div>


</section>

+


内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处内容转到此处