Question

如何获取我的链接以保持居中。我希望它在我的容器中心。它一直向左走。如果我改变浮动，它会停止跳跃效果。我尝试了一个保证金，但没有做任何事情。请帮助我想要跳跃悬停效果，但我不想要它正确或左，但在中心。有没有人知道另一种让我的链接跳转的方式，而不是我下面的代码。

         A.main:link, A.main:active, A.main:visited{
         font-family: arial narrow; 
         color: #404040; 
         font-size: 20px; 
         text-align: center; 
         letter-spacing: 5px; 
         text-transform: lowercase; 
         font-weight: normal;
         border:double;
         float: left;
         margin: 15px;
         -webkit-transition: margin 0.5s ease-out;
         -moz-transition: margin 0.5s ease-out;
         -o-transition: margin 0.5s ease-out;
          }


      A.main:hover {
         margin-top: 2px;
         }


           #container {
             margin: 0px auto;
           padding-left:15px;
           width: 800px;
           height: auto;
           background: #000;
           border-style:double;
           box-shadow: 15px 15px 5px #333;
          -moz-box-shadow: 10px 10px 5px #333;
          -webkit-box-shadow: 10px 10px 5px #333;}

         </head> 
         <body>

           <div id="header">
         </div>
          <center>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
            </center>

            <div id="container">

            </div>

Answer 1

将未列出的列表和li项添加到菜单中。然后将text-align：center添加到ul并显示：inline或inline-block to li。这是一个关于它的小提琴。 http://jsfiddle.net/XhmGe/

Answer 2

尝试操纵填充而不是边距。

      A.main:link, A.main:active, A.main:visited{
...
         margin: 0 15px 15px;
         paddding-top:15px;
...
}
     A.main:hover {
         padding-top: 2px;
         }

如果这不起作用，您可以按如下方式重写代码：

抛弃“中心”元素。用div替换它。将此div的样式设置为“position：relative”。如果需要，请将样式指定为“text-align：center”。

用span元素替换每个链接。为每个span指定onclick =“document.location =您要去的网址”。在每个跨度的CSS中，使用绝对定位。然后你可以将它们放在任何你喜欢的位置（使用样式中的左，右，顶部和/或底部）。

Answer 3

我已经找到了一个代码来完成所有工作。这以我的标签为中心:)

          #centeredmenu {
             float:left;
             width:100%;
             background:#fff;
             overflow:hidden;
             position:relative;
                    }
          #centeredmenu ul {
             clear:left;
             float:left;
             list-style:none;
             margin:0;
             padding:0;
              position:relative;
             left:50%;
             text-align:center;
                 }
               #centeredmenu ul li {
                 display:block;
                 float:left;
                 list-style:none;
                 margin:0;
                 padding:0;
                 position:relative;
                 right:50%;
                         }
                #centeredmenu ul li a {
                  display:block;
                   margin:0 0 0 1px;
                  padding:3px 10px;
                  background:#ddd;
                  color:#000;
                  text-decoration:none;
                   line-height:1.3em;
                       }
                 #centeredmenu ul li a:hover {
                    background:#369;
                     color:#fff;
                         }
                #centeredmenu ul li a.active,
                #centeredmenu ul li a.active:hover {
                     color:#fff;
                      background:#000;
                      font-weight:bold;
                             }

float：左悬停效果。我希望它居中但是因为浮动：左边它保持不变

3 个答案: