我有某些内联块元素。而且我有svg,我希望它位于div的中心(垂直和水平)

我试过下面的代码。



.theme_color_selection_main_div .theme_color_selection_inner_div {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 3px;
}

.theme_color_selection_main_div .theme_color_selection_inner_div svg {
  width: 10px;
  height: 10px;
  fill: #ffffff;
  display: block;
}

.theme_color_selection_main_div .bg-blue {
  background: blue;
}

.theme_color_selection_main_div .bg-red {
  background: red;
}

.theme_color_selection_main_div .bg-purple {
  background: purple;
}

.v-middle {
  vertical-align: middle;
}

<div class="theme_color_selection_main_div m-t-md text-center">
  <div class="theme_color_selection_inner_div bg-blue">
    <div class="text-center">
      <svg class="v-middle" enable-background="new 0 0 26 26" version="1.1" viewBox="0 0 26 26">
                            <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z" fill="#FFFFFF"></path>
                          </svg>
    </div>

  </div>
  <div class="theme_color_selection_inner_div bg-purple">

  </div>
  <div class="theme_color_selection_inner_div bg-red">

  </div>

</div>





我希望svg成为中心。

任何帮助都会很棒。

谢谢。

最佳答案

与其将svg居中,不如将其div容器居中。您可以通过添加以下规则的.svg-container类来实现此目的:

.svg-container{
      width: 10px;
      margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
}


这里唯一的约束是div的宽度,它必须像已经固定的svg上的宽度一样,因此这不应该成为问题。以下是一个有效的代码段。



.theme_color_selection_main_div .theme_color_selection_inner_div {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 3px;
}
.theme_color_selection_main_div .theme_color_selection_inner_div svg {
  width: 10px;
  height: 10px;
  fill: #ffffff;
  display: block;
}
.theme_color_selection_main_div .bg-blue {
  background: blue;
}
.theme_color_selection_main_div .bg-red {
  background: red;
}
.theme_color_selection_main_div .bg-purple {
  background: purple;
}

.v-middle{
vertical-align:middle;
}

.svg-container{
  width: 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="theme_color_selection_main_div m-t-md text-center">
    <div class="theme_color_selection_inner_div bg-blue">
      <div class="svg-container">
        <svg class="v-middle" enable-background="new 0 0 26 26"  version="1.1" viewBox="0 0 26 26">
        <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z" fill="#FFFFFF"></path>
        </svg>
      </div>
    </div>
    <div class="theme_color_selection_inner_div bg-purple">
    </div>
    <div class="theme_color_selection_inner_div bg-red">
    </div>
  </div>

10-01 15:43
查看更多