将SVG置于DIV中心

时间：2017-01-24 07:35:33

标签： html svg sass

我有一个带有SVG的div：

whats wrong 

.svg * {
  display: block;
  margin: 0 auto;
  fill: red;
}
<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

我想将SVG置于div中心。当它处于类似“html”的代码形式时，这不是以SVG为中心的正确方法吗？ （不确定它叫什么。）

我知道我正在正确定位我的sass fill: red正在发挥作用。

如果您需要查看更多我的代码，请告知并告诉我，谢谢您的时间！

3 个答案:

答案 0 :(得分：5)

  • 制作div position:relative和svg position:absolute
  • 为svg提供top:(calc 50% - 24px)和left:(50% - 24px)

包含div高度的50％减去svg高度的一半，包含div宽度的50％减去svg宽度的一半。 position:absolute元素（即svg）边界是position:relative父级（即.foo）边界。

<强>段 

.svg {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}
.foo {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 50%;
  border: 20px solid brown;
  background: black;
}
<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

答案 1 :(得分：2)

尝试使用sudo-element方法将SVG垂直居中于div中，如：

.svg * {
 
  fill: red;
       
}
.foo.ball{
   text-align:center;
   background-color:#333;
   width:150px;
   height:150px;
   margin:0 auto;
   border-radius: 50%;
   border: 20px solid  #945437;
}
.svg{
  display: inline-block;
  vertical-align: middle;
}
.foo.ball.design:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg>
</div>

sudo-element是一个在运行时呈现而不在HTML中编写的元素，它允许您在主元素周围添加许多功能

并且使用此技术是垂直对齐元素的众多方法之一，您可以阅读更多关于它的信息here

使用此方法在2个步骤中完成第一步是将sudo元素添加到容器中，如：

.your_container_class:after{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

，第二步是将这两个属性添加到您希望居中的内容中：

.your_content_class{
  display:inline-block;
  vertical-align:middle;
}

重要提示

在oreder中让这个工作容器本身sholud有一个高度属性，如：

.your_container_class{
 height:100%/*or 200px; or any other height*/
}

答案 2 :(得分：0)

SVG元素应该应用display:block，width和margin:0 auto，而不应该应用于其中的嵌套元素（*）

svg {
 width   : 200px;
 display : block;
 margin  : 0 auto;
}

更新：

更简单的方法是在持有者div上使用text-align:center代替（svg仍然需要宽度）

div{ text-align : center; }
相关问题
最新问题