我有以下html结构：
<a>
<span>
<svg></svg>
</span>
</a>
我在这里创建了一个JSFiddle：https://jsfiddle.net/rht5auy7/
如何在span标签中水平和垂直对齐SVG元素？
最佳答案
您的fiddle和您的摘录/标题彼此不同
所以这是您的小提琴的解决方案：
将text-align:center添加到您的.EditorToolbar .ToolButton
在padding:0 !important中将padding:2px !important更改为.EditorToolbar .ToolButton
片段
.EditorToolbar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
height: 29px;
border: 1px solid red;
background: #f6f6f6;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZmNmZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #cfcfd0));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* IE10+ */
background: linear-gradient(to bottom, #f6f6f6 0%, #cfcfd0 100%);
/* W3C */
/* box-shadow: 0 1px 3px rgba(0,0,0,.2); */
border-radius: 2px;
/* padding: 0 !important; */
/* margin: 0 !important; */
margin-bottom: 10px;
}
.EditorToolbar .ToolButton {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: 29px !important;
height: 29px !important;
/* border: 1px solid green; */
padding: 2px !important;
margin: 0 !important;
text-align: center;
}
.EditorToolbar .ToolButton svg {
display: inline-block;
width: 21px;
height: 21px;
border: 1px solid green;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
-webkit-transform-origin-z: initial;
}<div class="EditorToolbar">
<a data-wysihtml5-command="bold" title="Bold (CTRL+B)" class="ToolButton">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<path d="M15.232 10.346c-.181-.535-.437-1.005-.767-1.41-.331-.406-.731-.727-1.201-.962-.472-.235-1.002-.355-1.589-.355-.597 0-1.102.118-1.514.354-.412.236-.732.497-.959.777h-.034v-5.25h-2.668v12.764h2.458v-1.099h.032c.26.428.632.757 1.114.987.484.232.996.348 1.541.348.605 0 1.147-.123 1.625-.37.479-.248.883-.578 1.215-.987.328-.412.582-.888.757-1.429.172-.54.26-1.103.26-1.688-.002-.585-.092-1.144-.27-1.68zm-2.425 2.481c-.08.265-.203.499-.365.7-.162.203-.363.367-.602.49-.24.125-.518.187-.832.187-.303 0-.574-.062-.813-.187s-.442-.287-.61-.49c-.168-.201-.298-.434-.39-.69-.093-.26-.139-.524-.139-.795s.045-.533.137-.792c.093-.26.223-.492.39-.693.169-.201.372-.365.61-.488.24-.125.51-.187.813-.187.314 0 .594.062.832.187.237.123.439.283.604.48.162.196.283.426.365.686.08.258.121.521.121.791.002.272-.039.536-.121.801z"
fill="#1B2124"></path>
</svg>
</a>
</div>更新
根据OP的评论：
当我必须标记
a时，它们之间确实存在差距那？
因此，因为默认情况下
display:inline-block会产生很小的差距。只需添加font-size:0（few ways之一即可解决inline-block的空白从您的
.EditorToolbar中删除height:29px代替
.EditorToolbar（如我的第一个代码片段所示）更改为padding:2px !important片段
.EditorToolbar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
/* height: 29px; no need */
font-size:0;
border: 1px solid red;
background: #f6f6f6;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZmNmZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #cfcfd0));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6f6f6 0%, #cfcfd0 100%);
/* IE10+ */
background: linear-gradient(to bottom, #f6f6f6 0%, #cfcfd0 100%);
/* W3C */
/* box-shadow: 0 1px 3px rgba(0,0,0,.2); */
border-radius: 2px;
/* padding: 0 !important; */
/* margin: 0 !important; */
margin-bottom: 10px;
}
.EditorToolbar .ToolButton {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: 29px !important;
height: 29px !important;
background-color: yellow;
/* border: 1px solid green; */
padding: 3px !important;
margin: 0 !important;
text-align: center;
}
.EditorToolbar .ToolButton svg {
display: inline-block;
width: 21px;
height: 21px;
border: 1px solid green;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
-webkit-transform-origin-z: initial;
}<div class="EditorToolbar">
<a data-wysihtml5-command="bold" title="Bold (CTRL+B)" class="ToolButton">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<path d="M15.232 10.346c-.181-.535-.437-1.005-.767-1.41-.331-.406-.731-.727-1.201-.962-.472-.235-1.002-.355-1.589-.355-.597 0-1.102.118-1.514.354-.412.236-.732.497-.959.777h-.034v-5.25h-2.668v12.764h2.458v-1.099h.032c.26.428.632.757 1.114.987.484.232.996.348 1.541.348.605 0 1.147-.123 1.625-.37.479-.248.883-.578 1.215-.987.328-.412.582-.888.757-1.429.172-.54.26-1.103.26-1.688-.002-.585-.092-1.144-.27-1.68zm-2.425 2.481c-.08.265-.203.499-.365.7-.162.203-.363.367-.602.49-.24.125-.518.187-.832.187-.303 0-.574-.062-.813-.187s-.442-.287-.61-.49c-.168-.201-.298-.434-.39-.69-.093-.26-.139-.524-.139-.795s.045-.533.137-.792c.093-.26.223-.492.39-.693.169-.201.372-.365.61-.488.24-.125.51-.187.813-.187.314 0 .594.062.832.187.237.123.439.283.604.48.162.196.283.426.365.686.08.258.121.521.121.791.002.272-.039.536-.121.801z"
fill="#1B2124"></path>
</svg>
</a>
<a data-wysihtml5-command="bold" title="Bold (CTRL+B)" class="ToolButton">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<path d="M15.232 10.346c-.181-.535-.437-1.005-.767-1.41-.331-.406-.731-.727-1.201-.962-.472-.235-1.002-.355-1.589-.355-.597 0-1.102.118-1.514.354-.412.236-.732.497-.959.777h-.034v-5.25h-2.668v12.764h2.458v-1.099h.032c.26.428.632.757 1.114.987.484.232.996.348 1.541.348.605 0 1.147-.123 1.625-.37.479-.248.883-.578 1.215-.987.328-.412.582-.888.757-1.429.172-.54.26-1.103.26-1.688-.002-.585-.092-1.144-.27-1.68zm-2.425 2.481c-.08.265-.203.499-.365.7-.162.203-.363.367-.602.49-.24.125-.518.187-.832.187-.303 0-.574-.062-.813-.187s-.442-.287-.61-.49c-.168-.201-.298-.434-.39-.69-.093-.26-.139-.524-.139-.795s.045-.533.137-.792c.093-.26.223-.492.39-.693.169-.201.372-.365.61-.488.24-.125.51-.187.813-.187.314 0 .594.062.832.187.237.123.439.283.604.48.162.196.283.426.365.686.08.258.121.521.121.791.002.272-.039.536-.121.801z"
fill="#1B2124"></path>
</svg>
</a>
</div>