css: cara menggambar lingkaran dengan teks di tengah?

Saya menemukan contoh ini di stackoverflow:

Gambar Lingkaran menggunakan css saja

Bagus sekali. Tapi saya ingin tahu cara memodifikasi contoh itu sehingga saya bisa memasukkan teks di tengah-tengah lingkaran?

Saya juga menemukan ini: Teks berpusat vertikal dan horizontal di dalam lingkaran di CSS (seperti lencana pemberitahuan iphone)

tetapi untuk beberapa alasan, itu tidak berfungsi untuk saya. Ketika saya membuat kode tes berikut:

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

alih-alih lingkaran, saya mendapatkan bentuk oval. Saya mencoba bermain-main dengan kode untuk melihat bagaimana saya bisa membuatnya bekerja.

JSFiddle

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

Jika konten Anda akan dibungkus dan tingginya tidak diketahui, ini taruhan terbaik Anda:

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>

Anda dapat menggunakan 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;
}

Ini akan memungkinkan Anda untuk memiliki baris tunggal dan multi-baris teks rata garis tengah dan vertikal.

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>

Saya pikir Anda ingin menulis teks dalam bentuk oval atau lingkaran? kenapa tidak yang ini?

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

Untuk desain web saya baru-baru ini diberi saya harus menyelesaikan jumlah teks terpusat dan tidak diketahui dalam masalah lingkaran tetap dan saya pikir saya akan berbagi solusi di sini untuk orang lain yang mencari ke dalam combo lingkaran / teks.

Masalah utama yang saya miliki adalah teks akan sering melanggar batas-batas lingkaran. Untuk mengatasi ini saya akhirnya menggunakan 4 divs. Satu kontainer persegi panjang yang menentukan batas maksimal lingkaran (tetap). Di dalamnya akan menjadi div yang menggambar lingkaran dengan lebar dan tinggi diatur ke 100% sehingga mengubah ukuran induk mengubah ukuran lingkaran yang sebenarnya. Di dalamnya akan ada div persegi panjang lain yang, menggunakan% 's, akan membuat area batas teks mencegah teks meninggalkan lingkaran (untuk sebagian besar) Kemudian akhirnya div sebenarnya untuk teks dan pemusatan vertikal.

Lebih masuk akal sebagai kode:

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

Anda dapat menghapus tanda komentar warna perbatasan pada div wadah untuk melihat bagaimana batasannya.

Hal-hal yang harus diperhatikan: Anda masih dapat menembus batas-batas lingkaran jika Anda memasukkan terlalu banyak teks atau menggunakan kata-kata / teks yang tidak terputus yang terlalu panjang. Ini masih tidak cocok untuk teks yang sama sekali tidak dikenal (seperti input pengguna) tetapi bekerja paling baik ketika Anda tahu sedikit apa jumlah teks terbesar yang Anda butuhkan untuk menyimpan dan mengatur ukuran lingkaran dan ukuran font sesuai. Anda dapat mengatur div wadah teks untuk menyembunyikan luapan apa pun tentu saja, tetapi itu mungkin terlihat "rusak" dan tidak ada pengganti untuk benar-benar memperhitungkan ukuran maksimal dengan benar dalam desain Anda.

Semoga ini bermanfaat bagi seseorang! HTML / CSS bukan disiplin utama saya jadi saya yakin ini bisa diperbaiki!

Gambar lingkaran dengan teks di tengah dengan Tag HTML dan tanpa CSS

HTML memiliki tag SVG untuk ini. Anda dapat mengikuti pendekatan standar ini jika Anda tidak ingin menggunakan 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>

Jika hanya satu baris teks, Anda bisa menggunakan properti tinggi-baris, dengan nilai yang sama dengan tinggi elemen:

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

Jika teks memiliki beberapa baris, atau jika kontennya variabel, Anda bisa menggunakan padding-top:

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

Contoh: http://jsfiddle.net/2GUFL/

Tentu saja, Anda harus menggunakan tag untuk melakukannya. Satu untuk membuat lingkaran dan lainnya untuk teks.

Di sini beberapa kode dapat membantu Anda

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

Contoh langsung di sini http://jsbin.com/apumik/1/edit

Memperbarui

Di sini lebih kecil dengan beberapa perubahan

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

Bagi saya, hanya solusi ini yang berfungsi untuk teks multiline:

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

Jika Anda menggunakan kerangka Yayasan 5 dan Kompas, Anda dapat mencoba ini.

input .sass

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

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

Dapatkan ini dari halaman YouTube yang memiliki pengaturan yang sangat sederhana. Benar-benar dipelihara dan digunakan kembali.

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

Beberapa solusi di sini tidak bekerja dengan baik untuk saya di lingkaran kecil. Jadi saya membuat solusi ini menggunakan posisi absolut.

Menggunakan SASS akan terlihat seperti ini:

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

Dan bisa digunakan suka

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

Lihat demo di https://codepen.io/matheusrufca/project/editor/DnYPMK

Lihat cuplikan untuk melihat CSS keluaran

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

Salah satu cara untuk melakukannya adalah dengan menggunakan flexbox untuk menyelaraskan teks di tengah. Cara saya ditemukan untuk melakukannya, adalah sebagai berikut:

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

Di sini plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

Menggunakan kode ini akan responsif juga.

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

Saya menggabungkan beberapa jawaban dari orang lain dan dengan floatdan relativeitu memberi saya hasil yang saya butuhkan.

Dalam HTML saya menggunakan div. Saya menggunakannya di dalam liuntuk bilah navigasi.

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