我有一些内联块元素。而且我有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成为中心。
任何帮助都会很棒。
谢谢。
答案 0 :(得分：2)
不要将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>
答案 1 :(得分：1)
您可以使用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>
答案 2 :(得分：1)
只要您的元素是固定宽度和高度，您只需将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>
答案 3 :(得分：0)
您可以使用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>