css: làm thế nào để vẽ vòng tròn với văn bản ở giữa?

Tôi tìm thấy ví dụ này trên stackoverflow:

Vẽ Circle bằng css một mình

Đó là tuyệt vời. Nhưng tôi muốn biết làm thế nào để sửa đổi ví dụ đó để tôi có thể đưa văn bản vào giữa vòng tròn?

Tôi cũng tìm thấy điều này: Văn bản định tâm theo chiều dọc và chiều ngang trong vòng tròn trong CSS (như huy hiệu thông báo iphone)

nhưng vì một số lý do, nó không hoạt động với tôi Khi tôi tạo mã kiểm tra sau:

<div class="badge">1</div>

thay vì hình tròn, tôi có hình bầu dục. Tôi đang cố gắng chơi xung quanh với mã để xem làm thế nào tôi có thể làm cho nó hoạt động.

Câu đố

.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 Circle</div>

Nếu nội dung của bạn sẽ được bọc và có chiều cao không xác định, đây là đặt cược tốt nhất của bạn:

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>

Bạn có thể sử dụng css3 flexbox.

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;
}

Điều này sẽ cho phép bạn có văn bản một dòng và nhiều dòng được căn giữa và theo chiều ngang.

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>

Tôi nghĩ bạn muốn viết văn bản trong một hình bầu dục hoặc hình tròn? tại sao không phải cái này

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

Đối với một thiết kế web, gần đây tôi đã được đưa ra rằng tôi phải giải quyết số lượng văn bản tập trung và không xác định trong một vấn đề vòng tròn cố định và tôi nghĩ rằng tôi sẽ chia sẻ giải pháp ở đây cho những người khác tìm kiếm trong các kết hợp vòng tròn / văn bản.

Vấn đề chính tôi có là văn bản thường sẽ phá vỡ giới hạn của vòng tròn. Để giải quyết điều này, tôi đã sử dụng 4 div. Một thùng chứa hình chữ nhật chỉ định ranh giới tối đa (cố định) của vòng tròn. Bên trong đó sẽ là div vẽ vòng tròn với chiều rộng và chiều cao của nó được đặt thành 100% để thay đổi kích thước của cha mẹ sẽ thay đổi kích thước của vòng tròn thực tế. Bên trong đó sẽ là một div hình chữ nhật khác, sử dụng% 's, sẽ tạo ra một vùng ranh giới văn bản ngăn bất kỳ văn bản nào rời khỏi vòng tròn (đối với hầu hết các phần) Sau đó, cuối cùng là div thực tế cho văn bản và căn giữa.

Nó có ý nghĩa hơn như mã:

/* 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>			

Bạn có thể bỏ ghi chú các màu đường viền trên div container để xem nó ràng buộc như thế nào.

Những điều cần chú ý: Bạn vẫn có thể phá vỡ giới hạn của vòng tròn nếu bạn đặt quá nhiều văn bản vào hoặc sử dụng các từ / văn bản không bị ngắt quá dài. Nó vẫn không phù hợp với văn bản hoàn toàn không xác định (chẳng hạn như đầu vào của người dùng) nhưng hoạt động tốt nhất khi bạn biết mơ hồ lượng văn bản lớn nhất bạn cần lưu trữ là gì và đặt kích thước vòng tròn và kích thước phông chữ phù hợp. Tất nhiên, bạn có thể đặt div bộ chứa văn bản để ẩn bất kỳ lỗi tràn nào, nhưng điều đó có thể trông "bị hỏng" và không thể thay thế cho việc thực sự chiếm kích thước tối đa đúng trong thiết kế của bạn.

Hy vọng điều này hữu ích cho ai đó! HTML / CSS không phải là môn học chính của tôi nên tôi chắc chắn nó có thể được cải thiện!

Vẽ một vòng tròn với văn bản ở giữa bằng Thẻ HTML và không có CSS

HTML có thẻ SVG cho việc này. Bạn có thể làm theo phương pháp tiêu chuẩn này nếu bạn không muốn dùng 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>

Nếu đó chỉ là một dòng văn bản, bạn có thể sử dụng thuộc tính chiều cao dòng, có cùng giá trị với chiều cao phần tử:

height:100px;
line-height:100px;

Nếu văn bản có nhiều dòng hoặc nếu nội dung có thể thay đổi, bạn có thể sử dụng phần đệm:

padding-top:30px;
height:70px;

Ví dụ: http://jsfiddle.net/2GUFL/

Tất nhiên, bạn phải sử dụng các thẻ để làm điều đó. Một để tạo vòng tròn và khác cho văn bản.

Ở đây một số mã có thể giúp bạn

#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>

Ví dụ trực tiếp tại đây http://jsbin.com/apumik/1/edit

Cập nhật

Ở đây ít nhỏ hơn với một vài thay đổi

http://jsbin.com/apumik/3/edit

Đối với tôi, chỉ có giải pháp này hoạt động cho văn bản nhiều dòng:

.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}

Nếu bạn đang sử dụng khung Foundation 5 và La bàn, bạn có thể thử điều này.

.sass đầu vào

$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;
}

đầu ra .css

.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%;
}

Có cái này từ trang YouTube có thiết lập thực sự đơn giản. Hoàn toàn có thể duy trì và tái sử dụng.

.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>

Một số giải pháp ở đây không hoạt động tốt với tôi trên các vòng tròn nhỏ. Vì vậy, tôi đã thực hiện giải pháp này bằng cách sử dụng vị trí tuyệt đối ol.

Sử dụng SASS sẽ như thế này:

.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;
}

Và có thể được sử dụng như

#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);
}

Xem bản demo trên https://codepen.io/meditusrufca/project/editor/DnYPMK

Xem đoạn trích để xem CSS đầu ra

.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>

Một cách để làm điều đó là sử dụng flexbox để căn chỉnh văn bản ở giữa. Cách tôi tìm thấy để làm điều đó, là như sau:

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;
 }

Đây plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

Sử dụng mã này nó cũng sẽ được đáp ứng.

<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;
}

Tôi đã kết hợp một số câu trả lời từ những người khác và với nó floatvà relativenó đã cho tôi kết quả tôi cần.

Trong HTML tôi sử dụng div. Tôi sử dụng nó trong một lithanh điều hướng.

.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;
    }