如何使用css将文本居中,以便左右两侧溢出?我在这里看到一些问题,使文本溢出而不是,但我希望它看起来像放大了文本。
<body>
<div class="page">
SOMEHEADER
</div>
</body>
-
.page {
overflow:hidden;
width:70%;
text-align:center;
margin:0 auto;
font-size:8em;
word-wrap:none;
}
这是一个fiddle,其中包含我正在谈论的内容的演示。
答案 0 :(得分:12)
不是最优雅的解决方案,但似乎有效。
HTML:
<div class="page">
<div>
SOMEHEADER
</div>
</div>
CSS:
.page > div {
margin: 0 -1000%;
}
示例:http://jsfiddle.net/grc4/w36mX/
此方法的工作原理是拉伸内部div,使其宽度足以完全适合其内容(不包裹/溢出)。然后将内容居中(text-align: center
)并通过外部div(overflow: hidden
)剪裁为大小。
棘手的部分是使内部div足够宽以适应文本。每当它不够宽时,文本将向右溢出,使其不能正确居中(如原始jsFiddle中所示)。
通过使用negative margins,您可以将元素向左和向右拉伸一定量。如果你知道文本的大小是400px,那么你可以使用margin: 0 -200px
来确保内部div总是至少400px宽(左边200px,右边200px)。如果您不知道文本的确切大小,可以使用百分比或非常高的px值。
margin: 0 -100%
会将div的原始大小的100%拉伸到左侧,再将100%拉伸到右侧,使其比.page
div大3倍。文本宽度约为900px,因此如果.page
div的宽度低于300px,此方法将停止工作(尝试使用margin: 0 -100%
在jsFiddle中调整浏览器大小以查看我的意思。)
margin: 0 -1000%
拉伸div使其大21倍,这通常足以适合文本。
答案 1 :(得分:1)
请参阅此演示:http://jsfiddle.net/QZCuY/3/我已在最新的Chrome,FF和IE7-9中对其进行了测试
HTML(<div class="text">
已添加):
<div class="page">
<div class="text">
SOMEHEADER
</div>
</div>
<p>
How do I get the header to overflow left <u>and</u> right instead of just to the right?
</p>
CSS(.page
有两个新属性和新的.text类):
body {
background-color:green;
}
.page {
position:relative;
height:1em;
overflow:hidden;
background-color:red;
width:70%;
text-align:center;
margin:0 auto;
font-size:8em;
word-wrap:none;
}
p {
width:70%;
margin:50px auto 0;
text-align:center;
font-size:2em;
}
.text {
position:absolute;
right:-50%;
left:-50%;
}