html - CSS:在显示内联 block 中居中文本/svg

Question

我有某些行内 block 元素。并且我有 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 居中。

任何帮助都会很棒。

谢谢。

Answer 1

尝试将其 div 容器居中，而不是将 svg 居中。您可以通过使用以下规则添加此 .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>