如何在有邊框的橢圓內設定圓形圖示元素的樣式？-有解無憂

我正在嘗試對此進行編碼：

如何在有邊框的橢圓內設定圓形圖示元素的樣式？

但我很糾結如何處理邊框和東西中的不同顏色。到目前為止，我的 html 代碼中有：

.buttonfilter {
  color: #0065FC;
  background-color: #DEEBFF;
  height: 20px;
  width: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
}

<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés

渲染這個：如何在有邊框的橢圓內設定圓形圖示元素的樣式？

知道如何保持文本在線對齊保持淺藍色圓圈并添加灰色邊框嗎？

uj5u.com熱心網友回復：

這是執行此操作的示例。

.wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 50px; /** circle width */
  width: fit-content;
}

.circle {
  border-radius: 50%;
  background-color: #DEEBFF;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  margin: 0 10px;
}

<div class="wrapper">
  <div class="circle">
    ??
  </div>
  <div class="label">Animaux autorisés</div>
<div>

uj5u.com熱心網友回復：

這可能適用于您的目的，以快速更改邊框的顏色。

.buttonfilter {
  color: #0065FC;
  background-color: #DEEBFF;
  height: 20px;
  width: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
  outline: 5px single gray;
}

<div class="buttonfilter"><i class="fas fa-dog"></i></div> Animaux autorisés

uj5u.com熱心網友回復：

.buttonfilter {
  box-sizing: border-box; /* include padding in sizing for simplicity */
  display: inline-flex; /* add flex properties to this element and children */
  align-items: center; /* center children on the cross axis (vertically) */
  height: 40px;
  padding-right: 15px;
  border-radius: 20px; /* half the height of the element */
  border: 2px solid #e3e3e3;
  font-family: Arial;
  font-weight: bold;
}

.buttonfilter i {
  color: #0065FC;
  background-color: #DEEBFF;
  width: 40px;
  height: 40px;
  margin-left: -2px; /* pull icon over left border */
  border-radius: 50%;
  margin-right: 10px; /* add space between icon and text */
  display: flex; /* apply flex layout so we can position child pseudo-element */
  align-items: center; /* center icon on cross axis (vertically) */
  justify-content: center; /* center icon on main axis (horizontally) */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="buttonfilter"><i class="fas fa-dog"></i> Animaux autorisés</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405468.html

標籤：

上一篇：去除多余的寬度

下一篇：將卡片放入一行4htmlcss