居中 CSS 内容：""； <按钮>里面答案

【问题标题】：Center CSS content: ""; inside <button>居中 CSS 内容：""； <按钮>里面
【发布时间】：2015-04-02 06:43:24
【问题描述】：

我正在尝试将content: "+"; 垂直和水平居中。垂直地，我已经能够使用 line-height 来实现这一点。但是在水平方向上，我尝试使用绝对定位，然后用边距减去。但是没用……

这就是我所拥有的：

html body div.body-container form div#composite-field button#fes-submit {
 position: absolute; float: none; clear: both; top: 0; right: 5%;
 width: 80px; height: 100px; margin: 0; padding: 0; font-size: 42px;

 border: 0; border-radius: 0; outline: none; -webkit-appearance: none;
 background-color: #2e4856; color: #eab94e;
 z-index: 20;
}

html body div.body-container form div#composite-field button#fes-submit:before {        
 content: "+"; line-height: 100px; float: left;
 font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 42px; letter-spacing: normal;
}

有什么想法吗？

【问题讨论】：

标签： css

【解决方案1】：

如果您使用绝对定位，最好使用文字尺寸属性，例如顶部、底部、左侧、右侧，而不是使用边距。使用浮动也可能会抵消您想要的定位，因此请尝试删除它。另一种选择可能是在左侧或右侧添加负边距。

【讨论】：

这就是我所做的：top: 50%;, left: 50%; 然后减去边距。但这一切都被扭曲了。根本无法让它居中...
忽略浮动。它只是在那里，因为我正在测试一些东西。
你试过像 px 这样的字面值吗？带 % 的绝对位置会考虑整个视口。
可以使用精确的像素。它需要是百分比...按钮在悬停时改变宽度。
确保你的父元素的位置设置为相对 - 看看这篇文章可能会有所帮助 - stackoverflow.com/questions/16818792/center-a-pseudo-element

【解决方案2】：

解决了！

content:"+";
line-height: 100px;
display: block;
margin: 0 auto;

我垂直使用line-height:;，水平使用display: block;、margin: 0 auto;。

【讨论】：

margin: 0 auto 不应该工作，除非你也指定宽度。
我已经指定了宽度。它只是在悬停时从像素变为百分比。