CSS:在显示内联块中居中文本/svg

Question

>我有一些内联块元素。 并且我有 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

不要将 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>

Answer 2

只要您的元素是固定的宽度和高度，您只需将position: relative设置为父元素和

position: absolute;
top: 7.5px;
left: 7.5px;

到子元素(SVG 元素(

.theme_color_selection_main_div .theme_color_selection_inner_div {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 3px;
  position: relative;
}
.theme_color_selection_main_div .theme_color_selection_inner_div svg {
  width: 10px;
  height: 10px;
  fill: #ffffff;
  display: block;
  position: absolute;
  top: 7.5px;
  left: 7.5px;
}
.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>

Answer 3

您可以使用

flexbox，请查看下面的更新代码段：

.theme_color_selection_main_div .theme_color_selection_inner_div {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  float: left;
  margin: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.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">
        <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 class="theme_color_selection_inner_div bg-purple">
    </div>
    <div class="theme_color_selection_inner_div bg-red">
    </div>
</div>

Answer 4

在这里，使用 position:absolute 加 transform:translate

.text-center {}
.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 .bg-blue {
  position: relative;
  background: blue;
}
.v-middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  fill: #ffffff;
  display: block;
}

<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>