个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有以下html结构：
<a>
<span>
<svg></svg>
</span>
</a>
最佳答案
您的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>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>关于javascript - 在Span标签中水平和垂直对齐SVG元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31727157/
27
4
0
所以我使用一个带有整个 block 的标签作为链接，它是一个产品展示，所以你点击它会转到产品页面。现在我创建了一个标签作为链接到购物车页面的按钮。所以我让它工作，但是当我点击购物车按钮时，两个页面都会
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内
在Java中它是这样写的..当我移植这段代码时...意识到没有这样的东西 break 和continue . 我知道这些命令没有包含在内，因为在使用带有命令的 goto 时必须有一种更简洁的方法来执
我们有一个相当标准的发布过程，使用 Visual Source Safe 在发布之前标记构建。这允许我们在出现任何问题时从该标签中获取，并在需要更改时使用它进行分支。 我们有几个不同的项目，并且总是使
我必须创建一个搜索内容，其中包含搜索框、标题和段落描述。默认情况下，描述被禁用，当我输入一些与描述文本匹配的文本时，描述段落标签应该打开。一些匹配的演示是这样的: [ fiddle ][1] 但默认情
我一直在阅读有关 的文档标签，我似乎无法理解它与简单地使用 有何不同那是 display: none; 文档:template tag 例子 对比 例子
我需要一个脚本来复制当开关按钮打开时标记，当开关按钮关闭时删除标记。我需要一个简单的方法。这是开关按钮: 我试过这个: var change
JSF 是一个 MVC 框架，但我很困惑为什么我们已经有了这么多 HTML 标签还需要 JSF 标签。毫无疑问，JSF 简化了很多事情。我想进一步了解 JSF 中的模型 View 和 Controll
我在这个 website 上看到了那些 html 代码: Homepa
我添加了 photoswipe 插件，可以使用 搜索我的所有照片。标签，如果点击，照片就会变成全屏。我让它工作了，但现在我的导航栏(有 标签)在点击时会触发 photoswipe 插件。 在 ph
标签
我正在尝试截断显示自 的文本标签，但它不工作。我将样式应用于其他标签样式并且它确实有效(我看到的示例中没有一个使用 标签)。我想知道是否有人可以向我解释为什么会这样(我不是最擅长 HTML/CSS
HTML 是这样的: Menu 1 Menu 2 Sub menu 2
我可以更改 TextInputLayout 的位置 float 标签(底部 float 标签)吗？我需要为波纹管 float 标签设置正确的位置。 最佳答案 我解决了我的问题，这是我的 xml:
我的代码是 printMsg : function(data) { $("#message").html(data.bodyText); ... } 这里 data.body
我是 Scrapy 和 Xpath 的初学者，我正在寻找解析具有以下结构的网站 cat1 value1 value2
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
我必须从 xml 中解析数据。这是我的 xml- 或者它的 url 是:http://mobileecommerce.site247365.com/admin/catdata.xml News f
如何创建应该允许多行数据的标记。不要说使用textarea标签。我知道，但我只想 标记因为标签具有 value 属性。所以当我从 xml 文件获取值时，我应该使用 jquery 语法动态获取.. 最佳
我有一个页面使用我定义的某些样式。 在同一页面上，我刚刚导入了一个使用自己样式的外部 jQuery 插件，例如，包括 。被我自己覆盖的标签样式。 如何确保我的样式表中的样式不会覆盖 jQuery 插件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我是一名优秀的程序员,十分优秀！