Question

有没有更好的方法来制作html图标和进度条，让进度条位于图标的中心？

在我使用的 css 文件中，'float: left;'所以它们彼此相邻

如果你能帮助我，先谢谢你

HTML

    <div class="skills-container">
        <div class="my-skills">My skills</div>
    
    <div class="skill-row">
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                    <path fill="#E44D26" d="M47.025,0.02l-4.014,44.958L24.974,49.98L6.981,44.984L2.974,0.02H47.025L47.025,0.02z"/>
                    <polygon fill="#FFFFFF" points="29.542,9.211 25,9.211 24.981,9.211 21.917,9.211 11.172,9.211 11.304,10.691 12.659,25.891   25,25.891 25,25.889 31.771,25.889 31.132,33.041 24.981,34.699 23.371,34.27 23.371,34.27 18.832,33.046 18.44,28.646   12.905,28.646 13.676,37.305 22.273,39.69 22.273,39.69 22.328,39.705 24.973,40.439 24.998,40.434 24.998,40.433 36.287,37.303   36.371,36.371 37.665,21.853 37.8,20.373 24.981,20.373 24.981

,20.375 17.703,20.375 17.199,14.727 21.917,14.727 24.981,14.727   25,14.727 29.542,14.727 38.305,14.727 38.412,13.487 38.663,10.691 38.796,9.211 "/>
                </svg>
         </div>
         <div class="skill-level">
             <div class="progress"></div>
         </div>
</div>
</div>

CSS

.skills-container {
    width: 35%;
    height: 500px;
    background-color: #393E46;
    margin: auto;
    margin-top: 300px;
}

.my-skills {
    font-family: 'Roboto Slab', serif;
    font-size: 33px;
    color: #EEEEEE;[![enter image description here][1]][1]
}
.icon {
    margin: 3%;
    float: left;
}

.skill-level {
    width: 75%;
    height: 25px;
    margin: 5%;
    border: 2px solid purple;
    border-radius: 75px;
    float: left;
}
 .progress {
    width: 86%;
    height: 100%;
    border-radius: 75px;
    background-color: blue;
}

Answer 1

制作 .skill-row 类 flex 使徽标和进度条设置为彼此相邻并设置 align-items: center;帮助您设置进度条垂直居中图标。

.skills-container {
  max-width: 1190px;
  background-color: #393e46;
  margin: auto;
}

.my-skills {
  font-family: "Roboto Slab", serif;
  font-size: 33px;
  color: #eeeeee;
}
.skill-row {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.skill-level {
  margin-left: 30px;
  width: 75%;
  height: 25px;
  border: 2px solid purple;
  border-radius: 75px;
}
.progress {
  width: 86%;
  height: 100%;
  border-radius: 75px;
  background-color: blue;
}

<div class="skills-container">
  <div class="my-skills">My skills</div>
  <div class="skill-row">
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
        <path fill="#E44D26" d="M47.025,0.02l-4.014,44.958L24.974,49.98L6.981,44.984L2.974,0.02H47.025L47.025,0.02z" />
        <polygon fill="#FFFFFF" points="29.542,9.211 25,9.211 24.981,9.211 21.917,9.211 11.172,9.211 11.304,10.691 12.659,25.891   25,25.891 25,25.889 31.771,25.889 31.132,33.041 24.981,34.699 23.371,34.27 23.371,34.27 18.832,33.046 18.44,28.646   12.905,28.646 13.676,37.305 22.273,39.69 22.273,39.69 22.328,39.705 24.973,40.439 24.998,40.434 24.998,40.433 36.287,37.303   36.371,36.371 37.665,21.853 37.8,20.373 24.981,20.373 24.981

,20.375 17.703,20.375 17.199,14.727 21.917,14.727 24.981,14.727   25,14.727 29.542,14.727 38.305,14.727 38.412,13.487 38.663,10.691 38.796,9.211 " />
      </svg>
    </div>
    <div class="skill-level">
      <div class="progress"></div>
    </div>
  </div>
</div>

有没有更好的方法来做到这一点？

1 个答案: