如何根据屏幕大小css3使边框长度从文本而不是动态宽度修复20px

Question

抱歉我无法将问题正确地翻译成更容易的语言，抱歉:(

body 
{
  background: #33ffcc;
  min-height: 100%; 
  margin-top: 3em;

}

#kal
{
font-size: 2em;
color: #fff;
border: 3px solid #fff;
text-align: center;
}

但在这里： http://jsfiddle.net/skinnytotoro/s3Xfp/

并注意每次屏幕尺寸变化时框边框都在变化？ 我想让边框固定，比如文本左右两边20px 有没有怎样和任何方式这样做..？ 提前致谢！ 对不起语法错误。希望你不要头疼。

Answer 1

使用display: inline-block并将padding设置为您想要的空间：http://jsfiddle.net/s3Xfp/1/

Answer 2

另一种可行的方法是设置一个带边距的固定大小div，使div居中，然后手动设置填充。

#kal {
  width: 180px;
  margin: 0 auto;
  padding: 0 20px;
}

http://jsfiddle.net/s3Xfp/6/