Question

我正在使用一个模板，我没有为基于Joomla的网站创建自己。我试图集中一个jquery菜单，并花了几个小时浏览所有的代码和CSS，似乎无法找到如何做到这一点！所以，我决定创造一些小工作。我做了一个空白的png图像并将其放在菜单的左边，并使其宽度等于我想要的偏移量。这个小小的黑客工作得很好，除了不是所有的屏幕都是相同的大小，所以它实际上并不是在大多数屏幕上居中。我想知道是否有人知道一种动态的方法来计算中心究竟是什么，所以我可以动态地将空白png的宽度更改为页面加载时的宽度？

希望有意义并且非常感谢任何帮助

Answer 1

怎么样

  margin-left: auto;
  margin-right: auto;

Answer 2

用于居中元素的CSS：

#elementID {
    margin: 0 auto;
}

我读到了这个元素需要设置CSS width属性才能生效的地方，但我发现情况并非总是这样。

Answer 3

或者：

margin-left: auto;
margin-right: auto;

或

margin: 0 auto;

会工作吗？：）

Answer 4

用div包装器将它放在div中，即

<div id = "mainWrapper">

   <div id = "leftColumn"></div><!-- end leftColumn -->

   <div id = "centerColumn">
     <!-- Put you menu item in here -->
   </div><!-- end centerColumn -->

   <div id = "rightColumn"></div><!-- end rightColumn -->

</div><!-- end main wrapper -->

css如下 #mainWrapper { 向左飘浮; 宽度：100％; } #leftColumn { 向左飘浮; 宽度：25％; } #centerColumn { 向左飘浮; 宽度：50％; } #rightColumn { 向左飘浮; 宽度：25％; }

Answer 5

使用CSS将元素居中的典型方法是使用margin-left:auto; margin-right:auto;。

此外，元素需要显示为块并具有固定的宽度。

所以你的CSS看起来像这样：

.myelement {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:100px;
}

希望有所帮助。

Answer 6

虽然

margin:0 auto

适用于网站的主要容器（此容器的父容器是正文），当你将它放在容器内时会有点不稳定，就像我听到的那样。

尝试这样的事情，因为你知道宽度：

#selector{
    width:500px; /* however wide the element is */
    position:absolute;
    top:20px; /* This is whatever you want */
    left: 50%;
    margin-left:-250px; /* this is half of the width */
}

Answer 7

尝试使用firebug或chrome检查css，然后添加一条更改所需元素的css记录

align =“center”解决方法

7 个答案: