Question

我有以下html结构：

-0.0

我在这里创建了一个JSFiddle：https://jsfiddle.net/rht5auy7/

如何在span标记中水平和垂直对齐SVG元素？

Answer 1

您的fiddle和您的代码段/标题彼此不同

所以这里有一个小提琴的解决方案：

将text-align:center添加到您的.EditorToolbar .ToolButton
在padding:0 !important

padding:2px !important

.EditorToolbar .ToolButton

段

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

更新

基于OP的评论：

当我必须a标记时，它们之间确实存在差距是什么？

所以，因为默认情况下display:inline-block会产生一个小差距。只需添加font-size:0（few ways之一，即可修复inline-block的{{1}}

从.EditorToolbar

height:29px

而不是.EditorToolbar（，因为我的第一个代码段）更改为padding:2px !important

段

＆＃13;

padding: 3px !important

＆＃13;

.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;
}

＆＃13;

Span标签中的水平和垂直对齐SVG元素？

1 个答案:

段

更新

段