【问题标题】:How can I center a container when the screen space is taken over by other element?当屏幕空间被其他元素占据时,如何使容器居中?
【发布时间】:2013-08-05 08:46:03
【问题描述】:

我有一个左侧对齐的垂直侧边栏导航菜单,宽度为 211 像素,高度为 300 像素。然后我有一个 960px 宽的容器。由于边栏占用了 211px 的屏幕宽度,当我使用 margin: 0 auto; 将其居中时,容器与它重叠。

如何将容器从导航菜单而不是一般屏幕宽度居中,并提供一种解决方案,使其在所有浏览器/平台的导航菜单中居中显示?

【问题讨论】:

  • 把容器包裹起来,给里面的容器一个margin-left: 211ishpx?
  • @RitabrataGautam 谢谢。你能提供一个小提琴吗?

标签: html css


【解决方案1】:

用另一个 div 包装容器(例如.wrapper)。使包装器总视口宽度减去侧边栏宽度,然后在容器中使用margin:0 auto

示例:: FIDDLE

【讨论】:

  • 实际上您使用的是百分比宽度和高度。我需要它以像素为单位,因为在移动设备和 ipad 上,百分比宽度不适用于我现在所拥有的。我尝试用像素替换,但问题又回来了...
猜你喜欢
  • 2017-11-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-25
  • 2022-06-15
  • 1970-01-01
  • 2020-03-15
相关资源
最近更新 更多