中心 div 左右溢出

Posted 2023-03-05

【中文标题】中心 div 左右溢出

【英文标题】：Center div with overflow left and right

【发布时间】：2016-06-15 21:46:54

【问题描述】：

这看起来是一个非常简单的问题，但我找不到答案：

我想将一个固定宽度为 500 像素的 div 居中。 标记和样式如下：

<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>

body text-align:center;
div display:inline-block;width:500px;

当视口比我的 div 宽时，这很有效。但是，当视口小于我的 div 时，它不再居中而是向右溢出。我希望我的 div 在视口的两侧溢出，以便它保持居中。这可以用 CSS 实现吗？

非常感谢！

body text-align:center;
div display:inline-block;width:500px;

<div>
Lorem ipsum dolor sit amet, diceret delectus ea quo, ne eum essent legendos tacimates. Vel at perfecto omittantur. Iusto dolores sed an, error copiosae at his. Laoreet veritus vocibus te mel. An eos assum nobis vituperata, pro ad labitur facilis.
</div>

【问题讨论】：

left: 50%; margin-left: -250px; /* Half of width */ 看看here

喜欢这个jsfiddle.net/j08691/52n765ob?

谢谢，它必须向左右溢出，除了 position:fixed 没有别的办法吗？只是好奇。

@Xorifelse 无论如何，您的评论确实解决了我的问题，我可以接受 cmets 作为答案吗？ :)

你可以投票给 cmets ;) 这个技巧如此广为人知，我无法相信它。

【参考方案1】：

给你

Working JSFIDDLE

@media (max-width: 500px) 
  div 
      width:auto;
  

它仍然是 500px 宽，但是当输入一个较小的屏幕时，在这个例子中是 500px 宽，它会得到 width:auto 属性，并允许文本保持居中并留在屏幕上。

您可以阅读有关媒体查询的更多信息here

希望这对您有所帮助:)

// 马克·霍斯

【讨论】：

谢谢，但 div 必须在两边溢出，而不是换行，Xorifelse 评论是迄今为止最好的。

好吧，对不起，我想我不明白你打算做什么。

【参考方案2】：

首先，为什么有人会放大到那么远。现在我认为您必须在 css 中执行类似 overflow: hidden; 的操作，这应该可以。这个问题已经可以在is this the answer you're looking for?回答了