将浮动 div 与流体宽度居中
我在包含待售产品的页面上有以下 div:
容器 div。位于屏幕中央,宽度为 750 像素。 带有图像 (450px) 的 Div 向左浮动。 带有文本的 Div(流体宽度以允许文本溢出)向左浮动。
我希望 div 在容器内居中,但无法指定文本 div 的像素宽度,因为某些页面的文本比其他页面多。
解决这个问题的最佳方法是什么?
谢谢 加里
I have the following divs on a page which contain products for sale:
Container div. Centered on screen with 750px width.
Div with image (450px) floated left.
Div with text (fluid width to allow for text overflow) floated left.
I would like the divs centered within the container, but cannot specify a pixel width for the text div as some pages have more text than others.
What's the best way to go about this?
Thanks
Gary
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
一般来说,将块级元素(如 div)居中的过程是设置 margin:0 auto,但您永远不会让任何已浮动的内容居中。我们需要有关您想要实现的特定效果的更多信息:您是否需要将整个 div 居中,还是只需要 div 的内容居中?如果是前者,您需要在 div 上设置硬宽度,否则它将扩展以填充其容器的整个宽度。防止这种情况的唯一方法是使用浮动,因为您希望它居中,所以浮动。如果是后者,那么你可以在你的 div 上设置 text-align:center ,它里面的所有内容都会居中。
In general, the procedure for centering block-level elements (like divs) is to set margin:0 auto, but you'll never get anything to center that has been floated. We need more information about the specific effect you're trying to achieve: do you need the entire div to center, or will just the contents of the div do? If the former, you'll need to set a hard width on the div, or it will expand to fill the entire width of its container. The only way to prevent this is with a float, which is out because you want it centered. If it's the latter, then you can just set text-align:center on your div and everything inside it will be centered.