가운데 텍스트로 원을 그리는 방법은?
스택 오버플로에서 다음 예를 찾았습니다.
대단하네요.그런데 원의 가운데에 텍스트를 포함할 수 있도록 예제를 수정하는 방법을 알고 싶습니다.
다음과 같은 것도 발견했습니다.CSS에서 텍스트를 세로 및 가로로 원으로 중심 지정(아이폰 알림 배지와 같은)
하지만 어떤 이유에서인지, 그것은 저에게 효과가 없습니다.다음 테스트 코드를 만들 때:
<div class="badge">1</div>
원 대신에, 저는 타원형을 얻습니다.저는 코드를 어떻게 작동시킬 수 있는지 보려고 합니다.
line-height한 값은 의 한 중심으로 합니다.div 높 와 동 일 한 값 텍 의 트 수 로 가 표 니 합 다 시 에 데 운 으 직 줄 을 한 이 스 은 니 ▁the 다 합 시 ▁ver ▁one 표 div ▁line ▁of ▁show ▁div ▁the ▁as▁will이 예에서 높이와 선 높이는 500px입니다.
예
.circle {
width: 500px;
height: 500px;
line-height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
text-align: center;
background: #000
}<div class="circle">Hello I am A Circle</div>콘텐츠가 포장되어 높이를 알 수 없는 경우 이 방법이 최선입니다.
http://cssdeck.com/labs/aplvrmue
.badge {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: yellow;
}
.badge {
height: 100px;
width: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
}<div class="badge">1</div>당신은 css3를 사용할 수 있습니다.
HTML:
<div class="circle-with-text">
Here is some text in circle
</div>
CSS:
.circle-with-text {
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;
}
이렇게 하면 세로 및 가로로 가운데 정렬된 단일 줄 및 다중 줄 텍스트를 사용할 수 있습니다.
body {
margin: 0;
}
.circles {
display: flex;
}
.circle-with-text {
background: linear-gradient(orange, red);
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
margin: 5px 20px;
font-size: 15px;
padding: 15px;
display: flex;
height: 180px;
width: 180px;
color: #fff;
}
.multi-line-text {
font-size: 20px;
}<div class="circles">
<div class="circle-with-text">
Here is some text in circle
</div>
<div class="circle-with-text multi-line-text">
Here is some multi-line text in circle
</div>
</div>웹 디자인을 위해 저는 최근 고정된 원 문제에서 중심이 되고 알려지지 않은 텍스트의 양을 해결해야 한다는 것을 알게 되었고, 원/텍스트 조합을 조사하는 다른 사람들을 위해 여기서 해결책을 공유해야 한다고 생각했습니다.
제가 가진 주된 문제는 텍스트가 종종 원의 경계를 깨뜨린다는 것이었습니다.이를 해결하기 위해 4개의 div를 사용하게 되었습니다.원의 최대(고정) 경계를 지정한 직사각형 컨테이너 하나.안쪽에는 너비와 높이를 100%로 설정하여 원을 그리는 div가 있으므로 부모 크기를 변경하면 실제 원의 크기가 변경됩니다.그 안에는 %s을 사용하여 텍스트 경계 영역을 만드는 또 다른 직사각형 div가 있을 것입니다(대부분의 경우)마지막으로 텍스트와 수직 중심에 대한 실제 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%);
}<div class="circle_container">
<div class="circle_main">
<div class="circle_text_container">
<div class = "circle_text">
Here is an example of some text in my circle.
</div>
</div>
</div>
</div> 컨테이너 div의 테두리 색상에 주석을 달아서 어떻게 구속되는지 확인할 수 있습니다.
주의할 사항: 너무 많은 텍스트를 넣거나 너무 긴 단어/끊기지 않은 텍스트를 사용해도 원의 경계가 끊어질 수 있습니다.완전히 알려지지 않은 텍스트(예: 사용자 입력)에는 적합하지 않지만 저장해야 할 텍스트의 최대 양을 모호하게 알고 그에 따라 원 크기와 글꼴 크기를 설정할 때 가장 잘 작동합니다.텍스트 컨테이너 div를 설정하여 오버플로를 숨길 수 있지만, "파손"으로 보일 수 있으며 설계에서 최대 크기를 올바르게 계산하는 대신 사용할 수 없습니다.
이것이 누군가에게 유용하기를 바랍니다!HTML/CSS는 제 전공이 아니기 때문에 개선될 수 있다고 확신합니다!
HTML 태그가 있고 CSS가 없는 가운데 텍스트가 있는 원 그리기
이를 위한 SVG 태그가 있는 HTML.만약 당신이 CSS를 원하지 않는다면 이 표준 접근법을 따를 수 있습니다.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
Sorry, your browser does not support inline SVG.
<text fill="#000000" font-size="18" font-family="Verdana"
x="15" y="60">ASHISH</text>
</svg>
텍스트를 타원형으로 쓰시겠습니까, 원형으로 쓰시겠습니까?왜 이것이 아닌가요?
<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>물론 그렇게 하려면 to 태그를 사용해야 합니다.하나는 원을 만들고 다른 하나는 텍스트에 사용합니다.
여기 몇 가지 코드가 도움이 될 수 있습니다.
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
color:black;
}
.innerTEXT{
position:absolute;
top:80px;
left:60px;
}
<div id="circle">
<span class="innerTEXT"> Here a text</span>
</div>
라이브 예제는 여기에서 http://jsbin.com/apumik/1/edit
갱신하다
몇 가지 변경 사항이 있을 때 더 작은 크기로 표시됩니다.
http://jsbin.com/apumik/3/edit
한 줄의 텍스트만 사용하는 경우 요소 높이와 동일한 값으로 줄 높이 속성을 사용할 수 있습니다.
height:100px;
line-height:100px;
텍스트에 줄이 여러 개 있거나 내용이 가변적인 경우 패딩 상단을 사용할 수 있습니다.
padding-top:30px;
height:70px;
예: http://jsfiddle.net/2GUFL/
이것은 정말 간단한 설정을 가진 유튜브 페이지에서 얻었습니다.유지보수가 가능하고 재사용이 가능합니다.
.circle {
position: absolute;
top: 4px;
color: white;
background-color: red;
width: 18px;
height: 18px;
border-radius: 50%;
line-height: 18px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 999;
}<div class="circle">2</div>여러 줄의 텍스트에 대해서는 이 솔루션만 작동했습니다.
.circle-multiline {
display: table-cell;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: yellow;
}<div class="circle-multiline">Hello Wonderful World</div>만약 당신이 Foundation 5와 나침반 프레임워크를 사용하고 있다면, 당신은 이것을 시도할 수 있습니다.
.1024 입력
$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;
@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
width: $cw;
height: $ch;
background: $cb;
line-height: $clh;
text-align: $cta;
@include inline-block;
@include border-radius($cr);
}
.circle-default {
@include circle;
}
.1987년 출력
.circle-default {
width: 1.78571rem;
height: 1.78571rem;
background: white;
line-height: 1.78571rem;
text-align: center;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
HTML:
<div class="circle">
<p class="inner">HELLO</p>
</div>
CSS:
.circle {
background-color: darkgoldenrod;
height: 500px; width: 500px;
border-radius: 50%;}
.inner {
position: relative;
top: 50%;
text-align: center;
line-height: 0px;
}
첫 번째 div 클래스는 그릴 원을 나타내며, 사용 용도에 맞게 높이와 너비를 변경할 수 있습니다.
내부 클래스는 텍스트의 위치를 나타내며, 상대 위치를 사용하면 텍스트가 원에 유지될 수 있습니다.
상위 50%는 세로로 가운데를 맞추고 텍스트 정렬은 가로로 가운데를 맞춥니다.선 높이가 0이면 조금 더 선명하거나 정확합니다.
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
line-height: 500px;
text-align: center;
background: #000
}<div class="circle">Hello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle</div>여기에 있는 몇몇 해결책들은 작은 원들에서 저에게 잘 작동하지 않았습니다.그래서 저는 ol 절대 위치를 사용하여 이 솔루션을 만들었습니다.
SAS를 사용하면 다음과 같습니다.
.circle-text {
position: relative;
display: block;
text-align: center;
border-radius: 50%;
> .inner-text {
display: block;
@extend .center-align;
}
}
.center-align {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@mixin circle-text($size) {
width: $size;
height: $size;
@extend .circle-text;
}
그리고 다음과 같이 사용할 수 있습니다.
#red-circle {
background-color: red;
border: 1px solid black;
@include circle-text(50px);
}
#green-circle {
background-color: green;
border: 1px solid black;
@include circle-text(150px);
}
https://codepen.io/matheusrufca/project/editor/DnYPMK 에서 데모 보기
출력 CSS를 보려면 코드 조각을 참조하십시오.
.circle-text {
position: relative;
display: block;
border-radius: 50%;
text-align: center;
min-width: 50px;
min-height: 50px;
}
.center-align {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}<div id="red-circle" class="circle-text">
<span class="inner-text center-align">Hey</span>
</div>
<div id="green-circle" class="circle-text">
<span class="inner-text center-align">Big size circle</span>
<div>
<style>
#red-circle {
background-color: red;
border: 1px solid black;
width: 60px;
height: 60px;
}
#green-circle {
background-color: green;
border: 1px solid black;
width: 150px;
height: 150px;
}
</style>숫자 주위에 원을 추가하는 것은 CSS로 쉽게 할 수 있습니다.이 작업은 테두리 반지름 속성을 사용하여 수행할 수 있습니다.
또한 "인라인 블록"으로 설정된 표시 속성을 사용하여 요소를 인라인 수준 블록 컨테이너로 표시했습니다.
span.circle {
background: #010101;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #f1f1f1;
display: inline-block;
font-weight: bold;
line-height: 40px;
margin-right: 5px;
text-align: center;
width: 40px;
}
<span class="circle">1</span>
이 방법을 사용하면 텍스트를 원 안에 만들 수 있습니다.
.cir {
width: 400px;
height: 400px;
background: linear-gradient(to right, blue, orange);/*important*/
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;/*no need*/
color: white;/*no need*/
font-family: Arial;/*no need*/
border: 15px solid red;/*no need*/
user-select: none;/*no need*/
}<div class="cir">hello world</div>이 코드를 사용하면 응답할 수 있습니다.
<div class="circle">ICON</div>
.circle {
position: relative;
display: inline-block;
width: 100%;
height: 0;
padding: 50% 0;
border-radius: 50%;
/* Just making it pretty */
-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
background: #38a9e4;
color: white;
font-family: Helvetica, Arial Black, sans;
font-size: 48px;
text-align: center;
}
한 가지 방법은 텍스트를 가운데에 정렬하기 위해 플렉스 박스를 사용하는 것입니다.제가 발견한 방법은 다음과 같습니다.
HTML:
<div class="circle-without-text">
<div class="text-inside-circle">
The text
</div>
</div>
CSS:
.circle-without-text {
border-radius: 50%;
width: 70vh;
height: 70vh;
background-color: red;
position: relative;
}
.text-inside-circle {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
여기 plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview
저는 다른 사람들의 몇 가지 대답을 종합하고 있었고,float그리고.relative제게 필요한 결과를 가져다 주었습니다.
HTML에서는 div를 사용합니다.저는 그것을 a 안에서 사용합니다.li탐색 모음용입니다.
.large-list-style {
float: left;
position: relative;
top: -8px;
border-radius: 50%;
margin-right: 8px;
background-color: rgb(34, 198, 200);
font-size: 18px;
color: white;
}
.large-list-style:before,
.large-list-style:after {
content: '\200B';
display:inline-block;
line-height:0;
padding-top: 50%;
padding-bottom: 50%;
}
.large-list-style:before {
padding-left: 16px;
}
.large-list-style:after {
padding-right: 16px;
}
언급URL : https://stackoverflow.com/questions/16615403/how-to-draw-a-circle-with-text-in-the-middle
'source' 카테고리의 다른 글
| "동적 유형 텍스트 스타일을 사용하여 글꼴 요구를 자동으로 조정" 경고의 의미는 무엇입니까? (0) | 2023.09.04 |
|---|---|
| 스위프트 만드는 법UI 목록이 자동으로 스크롤됩니까? (0) | 2023.09.04 |
| [NgStyle] 조건과 결합(그렇지 않은 경우) (0) | 2023.09.04 |
| 단순 SELECT 쿼리가 큰 테이블에서 느림 (0) | 2023.08.30 |
| EP Plus를 사용하여 Excel 파일을 생성하지 못했습니다. (0) | 2023.08.30 |