html – 可以保存居中内容的自适应CSS圈子

概述我正在寻找一种方法来创建一个可以保持居中内容的响应式 CSS3圈子. 关于这个圈子,我在 this question找到了一些不错的信息.太糟糕了,似乎无法将内容集中在这个中. 尽管This question是一个应该居中的图像,但它与我的相似.在我的情况下使用背景图像不是一个选项,所以这个选项对我来说也不起作用. 你有什么想法我怎么能接近这个？ 当然我可以使用图像,但CSS会更优雅！ 纯CSS需 我正在寻找一种方法来创建一个可以保持居中内容的响应式 CSS3圈子.
关于这个圈子,我在 this question找到了一些不错的信息.太糟糕了,似乎无法将内容集中在这个中.

尽管This question是一个应该居中的图像,但它与我的相似.在我的情况下使用背景图像不是一个选项,所以这个选项对我来说也不起作用.

你有什么想法我怎么能接近这个？
当然我可以使用图像,但CSS会更优雅！

解决方法 纯CSS需要许多额外的包装

更新：原始发布(我删除)错过了您正在寻求响应式设计的事实. Building upon my answer for the responsive circles question you reference似乎适用于所有CSS3浏览器,see fiddle.

HTML(需要五个级别的包装器,我只在这个HTML中显示一个圆圈)

<div >    <div>      <div>        <div>          <div>            <!-- BEG Content -->            All types of content (see fiddle)            <!-- END Content -->          </div>        </div>      </div>    </div>    <!-- ditto the above 3 more times --></div>

CSS

.circles{    margin:0px auto;}.circles > div {    overflow:hidden;    float:left;    wIDth:auto;    height:auto;    position: relative;    border-radius:50%;    -moz-border-radius:50%;    -webkit-border-radius:50%;    -kHTML-border-radius: 50%;    background:#eee;}.circles > div > div {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;}.circles > div > div > div {    display: table;    wIDth: 100%;    height: 100%;}.circles > div > div > div > div {    display: table-cell;    text-align: center;    vertical-align: mIDdle;}@media (max-wIDth: 320px){    .circles > div {padding: 50%;}}@media (min-wIDth: 321px) and (max-wIDth: 800px){    .circles > div {padding: 25%;}}@media (min-wIDth: 801px){    .circles{wIDth:800px}    .circles > div {padding: 12.5%;}}

总结

以上是内存溢出为你收集整理的html – 可以保存居中内容的自适应CSS圈子全部内容，希望文章能够帮你解决html – 可以保存居中内容的自适应CSS圈子所遇到的程序开发问题。

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