逐漸增加的圓圈 CSS、HTML 和 Javascript

Question

我在 map 中添加了一個圖例/鍵，在正方形的情況下沒問題，但在圓形的情況下，它們與文本不對齊，有什么方法可以正確對齊文本和圓圈。 圖片

這是代碼

function getsizeLabel(d)
{
      return d > 90 ?  18 :
             d > 60 ?  14 :
             d > 30 ?  9 :
                       5 ;
}

function AddLDLegend() {
 legendLD = L.control({position: 'bottomright'});
 legendLD.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
        labels = ['<strong>Lockdown Days</strong>'],
        grades = [0, 30, 60, 90],
        categories = ['1-30','31-60','61-90'];

    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
        labels.push(
      '<i style="border-radius: 50%; border: 1px solid #8A2BE2; width:' + getsizeLabel(grades[i] + 1) +'px; height:' +  getsizeLabel(grades[i] + 1) +'px;"></i> ' +
       (grades[i] + grades[i+1]  ? categories[i] : '91-100'));
          } 
          div.innerHTML = labels.join('<br>');
          return div;
   };
  legendLD.addTo(map);
  }

The map is leaflet map I am just calling this function to add legend from another function but the design and everything related to the small legend div is in this function.

文本和圓圈 alignment 的偏好在此圖像中

在此處輸入圖像描述

Answer 1

我認為這就是您想要實現的目標。 如果您有任何疑問，請告訴我。

 const grades = [0, 30, 60, 90]; const categories = ['1-30', '31-60', '61-90']; function getSize(g) { return ( g > 90? 18: g > 60? 14: g > 30? 9: 5 ); } function getLabel(i) { const size = getSize(grades[i] + 1); const grade = (grades[i] + grades[i + 1]? categories[i]: '91-100'); const bulletStyle = [ 'display: inline-block;', 'vertical-align: middle;', 'border-radius: 50%;', 'border: 1px solid #8A2BE2;', `height: ${size}px;`, `width: ${size}px;` ]; const valueStyle = [ 'display: inline-block;', 'vertical-align: middle;' ]; const bullet = `<i style="${bulletStyle.join(' ')}"></i>`; const value = `<span style="${valueStyle.join(' ')}">${grade}</span>` return bullet + ' ' + value; } function getDiv() { const div = L.DomUtil.create('div', 'info legend'); const labels = ['<strong>Lockdown Days</strong>']; for (var i = 0; i < grades.length; i++) { div.innerHTML += labels.push(getLabel(i)); } div.innerHTML = labels.join('<br>'); return div; }; document.getElementsByTagName('BODY')[0].appendChild(getDiv());

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>