css

#css| 来源: 网络整理| 查看: 265

对于我最近得到的网页设计，我必须解决固定圆圈问题中的居中和未知数量的文本，我想我会在这里为其他研究圆圈/文本组合的人分享解决方案。

我遇到的主要问题是文本经常会打破圆圈的界限。为了解决这个问题，我最终使用了 4 个 div。一个指定圆的最大（固定）边界的矩形容器。里面将是绘制圆的 div，其宽度和高度设置为 100%，因此更改父级的大小会更改实际圆的大小。里面是另一个矩形 div，它使用 %'s 将创建一个文本边界区域，防止任何文本离开圆圈（大部分）然后最后是文本的实际 div 和垂直居中。

作为代码更有意义：

/* Main Container - this controls the size of the circle */ .circle_container { width : 128px; height : 128px; margin : 0; padding : 0; /* border : 1px solid red; */ } /* Circle Main draws the actual circle */ .circle_main { width : 100%; height : 100%; border-radius : 50%; border : 2px solid black; /* can alter thickness and colour of circle on this line */ margin : 0; padding : 0; } /* Circle Text Container - constrains text area to within the circle */ .circle_text_container { /* area constraints */ width : 70%; height : 70%; max-width : 70%; max-height : 70%; margin : 0; padding : 0; /* some position nudging to center the text area */ position : relative; left : 15%; top : 15%; /* preserve 3d prevents blurring sometimes caused by the text centering in the next class */ transform-style : preserve-3d; /*border : 1px solid green;*/ } /* Circle Text - the appearance of the text within the circle plus vertical centering */ .circle_text { /* change font/size/etc here */ font: 11px "Tahoma", Arial, Serif; text-align : center; /* vertical centering technique */ position : relative; top : 50%; transform : translateY(-50%); } Here is an example of some text in my circle.

您可以取消注释容器 div 上的边框颜色以查看它是如何约束的。

需要注意的事项：如果您放入太多文字或使用太长的单词/完整文字，您仍然可以打破圆圈的界限。它仍然不适合完全未知的文本（例如用户输入），但是当您模糊地知道您需要存储的最大文本量是多少并相应地设置您的圆圈大小和字体大小时，它的效果最好。当然，您可以将文本容器 div 设置为隐藏任何溢出，但这可能只是看起来“损坏”并且不能替代在您的设计中正确考虑最大尺寸。

希望这对某人有用！HTML/CSS 不是我的主要学科，所以我相信它可以改进！

【本文地址】

公司简介

联系我们