【问题标题】:Possible to create responsive circle container with centered content?可以创建内容居中的响应式圆形容器吗?
【发布时间】:2013-08-17 06:20:46
【问题描述】:

一段时间以来,我一直在努力想出以下布局:一个大小动态(响应式)的圆圈,其中的内容水平和垂直居中。内容的长度会有所不同,因此需要使用绝对居中方法 (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height) 或表格单元方法进行垂直对齐,这两种方法我都无法成功使用。

到目前为止我的尝试 - http://codepen.io/anon/pen/clqzB

【问题讨论】:

  • 解决方案是here。检查该答案“Resize with Content - Improvement”的最新更新

标签: responsive-design center vertical-alignment geometry alignment


【解决方案1】:

响应比率为居中问题增加了一点难度,但您使用 padding 为圆提供 1:1 的比率是正确的。

您要求使用 Absolute Centering 或 Table-Cell 方法,但我发现 Inline-Block 居中(我在文章中介绍)对于不同长度的内容是最可靠的跨浏览器,这很重要,因为圆圈的大小总是在变化,导致文本重排。

这还允许在已使用 .Inline-Center 类创建的伪元素上使用 padding-bottom: 100% 来设置圆的 1:1 比例并将 div.content 正确居中。

这是代码:http://codepen.io/shshaw/pen/kGdAe

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-04-19
    • 1970-01-01
    • 2016-01-13
    • 2019-10-31
    • 1970-01-01
    • 1970-01-01
    • 2015-09-06
    • 2015-03-16
    相关资源
    最近更新 更多