Bootstrap：根据溢出的中心元素

Question

这是用于复制＆＃39;

的最小代码。

<div class="container-fluid" style="text-align: center">
  <h1>REALLYREALLYREALLYLONGWORDIT'SNOTOVERYET</h1>
  <button class="btn">REALLYLONGTEXTAGAINCANYOUEVENREADTHIS</a>
</div>

jsfiddle是here。

现在，当屏幕尺寸足够大时，它看起来很好：

但是如果屏幕尺寸变小，它会看起来像这样：

文字溢出;有一个滚动条;但按钮仍然位于屏幕可见部分的中心位置，而不是整个视图中心。

我尝试更改overflow样式属性的值，但没有效果。实际上，这似乎不是溢出的问题，而是容器和边界的方式。定义。我将如何解决＆＃39;修复＆＃39;此？

Answer 1

父类div是一个流体容器，因为类名称通知。这意味着，没有width属性决定该容器的维度。此外，h1文字没有任何空格，因此文字无法中断，从而阻止内容居中。 因此标题溢出，button在窗口的可见部分居中，恰好是container-fluid div填充的所有空间。

不管怎样，我可以想到两种可能的解决方案：

1. 将min-width或width属性设置为父div。
2. 使用@media查询调整某些分辨率上的文本和/或元素的大小。
3. 在父div上使用float:left强制全宽。

Answer 2

您的文字不包含空格＆＃34; ＆＃34 ;. 对于所有肯定需要空间的文本!!!

Answer 3

您可以将容器用作类而不是容器流体     看看这个小提琴

[jsFiddle][http://jsfiddle.net/akrzj7o9/6/]

I think it can help to you

原因：容器流体包含负填充，而容器没有。