如何将 SVG 元素与同一容器中的元素水平对齐？

Question

我有一个 svg 元素，我想将其与同一容器中的文本对齐，使其处于相同的起始位置。 SVG 元素的高度和宽度是我用来设置它有多大的元素，但是当我更改高度属性时，它会按我的意愿上升，但大小会发生变化。 SVG 和文本都在 flex 容器中，align-items 属性设置为 start

我想将其向上移动（即水平对齐），使其与右侧的文本保持一致，但不更改 SVG 元素的大小。除了高度和宽度属性之外，还有其他方法可以做到这一点吗？

.machine-details-details.v2 {
    align-items: start;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin: 10px 10px 0;
}

svg {
    background-image: none;
    background-position: 0% 0%;
    display: inline;
    fill: rgb(51, 51, 51);
    height: 50px;
    width: 50px;
}

<div class="machine-details-details v2">
 <div class="machine-icon">
  <svg version="1" id="main_shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="loader" style="background-image: none; background-position: 0% 0%; display: inline; fill: rgb(51, 51, 51); height: 50px; width: 50px;">
   <path class="outline" d="M27.25 27.312c-.648 0-1.324-.323-1.682-.938h-.193a1 1 0 0 1-.989-.856 4.751 4.751 0 0 1-3.698 1.794 4.76 4.76 0 0 1-4.632-3.694 1 1 0 0 1-.993.882h-2.239a4.739 4.739 0 0 1-4.323 2.812 4.741 4.741 0 0 1-4.412-3.025L.553 22.52A1.001 1.001 0 0 1 0 21.625v-8.438c0-.379.214-.725.553-.895l3.75-1.875c.139-.069.292-.105.447-.105h.875v-.639L4.793 8.01a1 1 0 0 1 .895-1.447c.969 0 2.334.538 2.75 1.956V5.688a1 1 0 0 1 1-1H16a1 1 0 0 1 1 1v.838l.918 4.59c.013.065.02.13.02.196v.125a2.06 2.06 0 0 1 .875-.188h5.625a1.94 1.94 0 0 1 1.938 1.938c0 .665-.336 1.27-.88 1.624l-.347.52a2.378 2.378 0 0 1-.004 2.284l.052.197h.118c.016-.242.118-.472.291-.645l2.812-2.812a1 1 0 0 1 1.677.95l-.872 3.49 1.73 6.056.754.754A1 1 0 0 1 31 27.312h-3.75z" style="fill: rgb(255, 255, 255);"></path>
   <path class="quinary" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="fill: rgb(255, 255, 255);"></path>
   <path class="shadow" d="M24.438 12.25h-3.75v.938h3.75L22.562 16h.938l1.875-2.812z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <circle class="tertiary" cx="23.031" cy="16.469" r="1.406" style="fill: rgb(51, 51, 51);"></circle>
   <path class="window" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="opacity: 0.3; fill: rgb(93, 201, 232);"></path>
   <path class="tertiary" d="M5.688 7.562s1.875 0 1.875 1.875v2.812h-.938V9.438l-.937-1.876z" style="fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M1 13.188l3.75-1.876h4.688V16h5.624v7.5H4.75L1 21.625z" style="fill: rgb(255, 204, 34);"></path>
   <path class="secondary" d="M5.688 11.312h4.688v1.875H5.688z" style="fill: rgb(0, 0, 0);"></path>
   <path class="shadow" d="M1 15.062h1.875v4.688H1z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="quinary" d="M11.312 15.062H5.688V16h1.874l.938.938h2.812z" style="fill: rgb(255, 255, 255);"></path>
   <path class="tertiary" d="M21.625 12.25h-2.812c-.562 0-.938.375-.938.938v.938h3.75V12.25zM23.5 18.812h2.812v.938H23.5z" style="fill: rgb(51, 51, 51);"></path>
   <path class="secondary" d="M25.375 24.438h-6.562v-11.25l3.375 2.25c1.125.75 1.594 1.125 1.781 1.688.188.562 1.406 5.438 1.406 5.438v1.874z" style="fill: rgb(0, 0, 0);"></path>
   <path class="primary" d="M23.5 22.562H16v-5.624l.938-1.876v-1.874h1.874zM9.438 5.688H16v.938H9.438z" style="fill: rgb(255, 204, 34);"></path>
   <circle class="tertiary" cx="20.688" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="20.688" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <circle class="tertiary" cx="24.438" cy="13.188" r=".938" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="tertiary" cx="8.5" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="8.5" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <path class="tertiary" d="M15.062 14.125v-7.5H9.438V16h4.688v3.75h2.812v-5.625h-1.876zm-.937 0l-3.75-1.875V7.562h3.75v6.563z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M16 18.812h.938v3.75H16z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M30.062 25.375l-1.875-6.562.938-3.75-2.812 2.812v2.812l-.938 1.875v2.812h.938c0 .938.938.938.938.938H31l-.938-.937z" style="fill: rgb(255, 204, 34);"></path>
   <path class="shadow" d="M26.312 25.375h-.937v-2.813l.937-1.874z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="tertiary" d="M1 19.75h5.625v.938H1z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M4.75 11.312h.938v8.438H4.75z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M13.188 16h4.688v.938h-4.688z" style="fill: rgb(255, 204, 34);"></path>
  </svg>
</div>
 <div class="details">
  <span class="name">Test</span>
  <span class="pin">Test</span>
  <span class="organization">Test</span>
 </div>
 <div class="infographic-header2">
  <div class="close-button" style="background-color: rgb(171, 171, 171);">
   <div class="icon-remove-white"></div>
  </div>
 </div>
</div>

以下是其当前外观的屏幕截图：

Answer 1

显然，您的问题是 SVG 顶部的 gap/white-space。解决该问题的一种方法是更新 SVG 的 viewBox 以消除该差距。但是你说你不想改变 SVG 的大小。

鉴于该限制。最简单的解决方案是将您的 SVG 设置为 position: relative 并使用负值 top 将其提高一点。

svg {
    height: 50px;
    width: 50px;
    position: relative;
    top: -6px;
}

演示

.machine-details-details.v2 {
    align-items: start;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin: 10px 10px 0;
}

svg {
    height: 50px;
    width: 50px;
    position: relative;
    top: -6px;
}

<div class="machine-details-details v2">
 <div class="machine-icon">
  <svg version="1" id="main_shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="loader" style="background-image: none; background-position: 0% 0%; display: inline; fill: rgb(51, 51, 51); height: 50px; width: 50px;">
   <path class="outline" d="M27.25 27.312c-.648 0-1.324-.323-1.682-.938h-.193a1 1 0 0 1-.989-.856 4.751 4.751 0 0 1-3.698 1.794 4.76 4.76 0 0 1-4.632-3.694 1 1 0 0 1-.993.882h-2.239a4.739 4.739 0 0 1-4.323 2.812 4.741 4.741 0 0 1-4.412-3.025L.553 22.52A1.001 1.001 0 0 1 0 21.625v-8.438c0-.379.214-.725.553-.895l3.75-1.875c.139-.069.292-.105.447-.105h.875v-.639L4.793 8.01a1 1 0 0 1 .895-1.447c.969 0 2.334.538 2.75 1.956V5.688a1 1 0 0 1 1-1H16a1 1 0 0 1 1 1v.838l.918 4.59c.013.065.02.13.02.196v.125a2.06 2.06 0 0 1 .875-.188h5.625a1.94 1.94 0 0 1 1.938 1.938c0 .665-.336 1.27-.88 1.624l-.347.52a2.378 2.378 0 0 1-.004 2.284l.052.197h.118c.016-.242.118-.472.291-.645l2.812-2.812a1 1 0 0 1 1.677.95l-.872 3.49 1.73 6.056.754.754A1 1 0 0 1 31 27.312h-3.75z" style="fill: rgb(255, 255, 255);"></path>
   <path class="quinary" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="fill: rgb(255, 255, 255);"></path>
   <path class="shadow" d="M24.438 12.25h-3.75v.938h3.75L22.562 16h.938l1.875-2.812z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <circle class="tertiary" cx="23.031" cy="16.469" r="1.406" style="fill: rgb(51, 51, 51);"></circle>
   <path class="window" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="opacity: 0.3; fill: rgb(93, 201, 232);"></path>
   <path class="tertiary" d="M5.688 7.562s1.875 0 1.875 1.875v2.812h-.938V9.438l-.937-1.876z" style="fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M1 13.188l3.75-1.876h4.688V16h5.624v7.5H4.75L1 21.625z" style="fill: rgb(255, 204, 34);"></path>
   <path class="secondary" d="M5.688 11.312h4.688v1.875H5.688z" style="fill: rgb(0, 0, 0);"></path>
   <path class="shadow" d="M1 15.062h1.875v4.688H1z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="quinary" d="M11.312 15.062H5.688V16h1.874l.938.938h2.812z" style="fill: rgb(255, 255, 255);"></path>
   <path class="tertiary" d="M21.625 12.25h-2.812c-.562 0-.938.375-.938.938v.938h3.75V12.25zM23.5 18.812h2.812v.938H23.5z" style="fill: rgb(51, 51, 51);"></path>
   <path class="secondary" d="M25.375 24.438h-6.562v-11.25l3.375 2.25c1.125.75 1.594 1.125 1.781 1.688.188.562 1.406 5.438 1.406 5.438v1.874z" style="fill: rgb(0, 0, 0);"></path>
   <path class="primary" d="M23.5 22.562H16v-5.624l.938-1.876v-1.874h1.874zM9.438 5.688H16v.938H9.438z" style="fill: rgb(255, 204, 34);"></path>
   <circle class="tertiary" cx="20.688" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="20.688" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <circle class="tertiary" cx="24.438" cy="13.188" r=".938" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="tertiary" cx="8.5" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="8.5" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <path class="tertiary" d="M15.062 14.125v-7.5H9.438V16h4.688v3.75h2.812v-5.625h-1.876zm-.937 0l-3.75-1.875V7.562h3.75v6.563z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M16 18.812h.938v3.75H16z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M30.062 25.375l-1.875-6.562.938-3.75-2.812 2.812v2.812l-.938 1.875v2.812h.938c0 .938.938.938.938.938H31l-.938-.937z" style="fill: rgb(255, 204, 34);"></path>
   <path class="shadow" d="M26.312 25.375h-.937v-2.813l.937-1.874z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="tertiary" d="M1 19.75h5.625v.938H1z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M4.75 11.312h.938v8.438H4.75z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M13.188 16h4.688v.938h-4.688z" style="fill: rgb(255, 204, 34);"></path>
  </svg>
</div>
 <div class="details">
  <span class="name">Test</span>
  <span class="pin">Test</span>
  <span class="organization">Test</span>
 </div>
 <div class="infographic-header2">
  <div class="close-button" style="background-color: rgb(171, 171, 171);">
   <div class="icon-remove-white"></div>
  </div>
 </div>
</div>

Answer 2

这里是我看来比较好的方法吧。对我来说，使用 flex 你有更多的选择，同时它更可靠并且可以完成。

.details{
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
}

.details span{
    flex: 100%
}

.machine-details-details.v2 {
    align-items: start;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    margin: 10px 10px 0;
}

svg {
    background-image: none;
    background-position: 0% 0%;
    display: inline;
    fill: rgb(51, 51, 51);
    height: 50px;
    width: 50px;
}

<div class="machine-details-details v2">
 <div class="machine-icon">
  <svg version="1" id="main_shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="loader" style="background-image: none; background-position: 0% 0%; display: inline; fill: rgb(51, 51, 51); height: 50px; width: 50px;">
   <path class="outline" d="M27.25 27.312c-.648 0-1.324-.323-1.682-.938h-.193a1 1 0 0 1-.989-.856 4.751 4.751 0 0 1-3.698 1.794 4.76 4.76 0 0 1-4.632-3.694 1 1 0 0 1-.993.882h-2.239a4.739 4.739 0 0 1-4.323 2.812 4.741 4.741 0 0 1-4.412-3.025L.553 22.52A1.001 1.001 0 0 1 0 21.625v-8.438c0-.379.214-.725.553-.895l3.75-1.875c.139-.069.292-.105.447-.105h.875v-.639L4.793 8.01a1 1 0 0 1 .895-1.447c.969 0 2.334.538 2.75 1.956V5.688a1 1 0 0 1 1-1H16a1 1 0 0 1 1 1v.838l.918 4.59c.013.065.02.13.02.196v.125a2.06 2.06 0 0 1 .875-.188h5.625a1.94 1.94 0 0 1 1.938 1.938c0 .665-.336 1.27-.88 1.624l-.347.52a2.378 2.378 0 0 1-.004 2.284l.052.197h.118c.016-.242.118-.472.291-.645l2.812-2.812a1 1 0 0 1 1.677.95l-.872 3.49 1.73 6.056.754.754A1 1 0 0 1 31 27.312h-3.75z" style="fill: rgb(255, 255, 255);"></path>
   <path class="quinary" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="fill: rgb(255, 255, 255);"></path>
   <path class="shadow" d="M24.438 12.25h-3.75v.938h3.75L22.562 16h.938l1.875-2.812z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <circle class="tertiary" cx="23.031" cy="16.469" r="1.406" style="fill: rgb(51, 51, 51);"></circle>
   <path class="window" d="M10.375 6.625H16l.938 4.687v2.813h-6.563z" style="opacity: 0.3; fill: rgb(93, 201, 232);"></path>
   <path class="tertiary" d="M5.688 7.562s1.875 0 1.875 1.875v2.812h-.938V9.438l-.937-1.876z" style="fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M1 13.188l3.75-1.876h4.688V16h5.624v7.5H4.75L1 21.625z" style="fill: rgb(255, 204, 34);"></path>
   <path class="secondary" d="M5.688 11.312h4.688v1.875H5.688z" style="fill: rgb(0, 0, 0);"></path>
   <path class="shadow" d="M1 15.062h1.875v4.688H1z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="quinary" d="M11.312 15.062H5.688V16h1.874l.938.938h2.812z" style="fill: rgb(255, 255, 255);"></path>
   <path class="tertiary" d="M21.625 12.25h-2.812c-.562 0-.938.375-.938.938v.938h3.75V12.25zM23.5 18.812h2.812v.938H23.5z" style="fill: rgb(51, 51, 51);"></path>
   <path class="secondary" d="M25.375 24.438h-6.562v-11.25l3.375 2.25c1.125.75 1.594 1.125 1.781 1.688.188.562 1.406 5.438 1.406 5.438v1.874z" style="fill: rgb(0, 0, 0);"></path>
   <path class="primary" d="M23.5 22.562H16v-5.624l.938-1.876v-1.874h1.874zM9.438 5.688H16v.938H9.438z" style="fill: rgb(255, 204, 34);"></path>
   <circle class="tertiary" cx="20.688" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="20.688" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <circle class="tertiary" cx="24.438" cy="13.188" r=".938" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="tertiary" cx="8.5" cy="22.562" r="3.75" style="fill: rgb(51, 51, 51);"></circle>
   <circle class="primary" cx="8.5" cy="22.562" r="1.875" style="fill: rgb(255, 204, 34);"></circle>
   <path class="tertiary" d="M15.062 14.125v-7.5H9.438V16h4.688v3.75h2.812v-5.625h-1.876zm-.937 0l-3.75-1.875V7.562h3.75v6.563z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M16 18.812h.938v3.75H16z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M30.062 25.375l-1.875-6.562.938-3.75-2.812 2.812v2.812l-.938 1.875v2.812h.938c0 .938.938.938.938.938H31l-.938-.937z" style="fill: rgb(255, 204, 34);"></path>
   <path class="shadow" d="M26.312 25.375h-.937v-2.813l.937-1.874z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="tertiary" d="M1 19.75h5.625v.938H1z" style="fill: rgb(51, 51, 51);"></path>
   <path class="shadow" d="M4.75 11.312h.938v8.438H4.75z" style="opacity: 0.3; fill: rgb(51, 51, 51);"></path>
   <path class="primary" d="M13.188 16h4.688v.938h-4.688z" style="fill: rgb(255, 204, 34);"></path>
  </svg>
</div>
 <div class="details">
  <span class="name">Test</span>
  <span class="pin">Test</span>
  <span class="organization">Test</span>
 </div>
 <div class="infographic-header2">
  <div class="close-button" style="background-color: rgb(171, 171, 171);">
   <div class="icon-remove-white"></div>
  </div>
 </div>
</div>

如何将 SVG 元素与同一容器中的元素水平对齐？

How to horizontally align SVG element with elements in the same container?

html

css

svg

sass

以下是其当前外观的屏幕截图：