1

次の問題を考えてみましょう: メニューを中央に配置すると、メニューの内容が変更されます (たとえば、ボタンを押した後、最初のボタンの内容は、「こんにちは」から「ユーザーへの挨拶」またはそれに沿ったものに設定されます)。行. 重要なことは、要素の幅が変数になることです.

要素のコンテンツも中央揃えにしたいとします。私が見つけたアプローチは基本的にこれです：

 .centerMe1 {  
     margin-right: auto ;
     margin-left: auto ;
     max-width: 500px;
 }

要素の幅がわからないため、この場合は使用できないことを除いて、これは非常にうまく機能します。親の幅が子の幅と等しくなるように設定するため、 float:left を使用しようとしましたが、機能しませんでした。基本的に、幅は正しく設定されていましたが、要素が中央に配置されていませんでした。

これは 2 番目のクラスです。

.centerMe2 {
     margin-right: auto ;
     float: left;
     margin-left: auto ;
}

そしてソースコード全体（テストを簡単にするため）

<!DOCTYPE html>
<html>
    <head>
       <title>Center Error</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
         <script src="http://code.jquery.com/jquery.js"></script>
         <style type="text/css">
             .centerMe1 {  
                 margin-right: auto ;
                 margin-left: auto ;
                 max-width:500px;
             }
             .centerMe2 {
                 margin-right: auto ;
                 float: left;
                 margin-left: auto ;
             }
         </style>
   </head>

  <body>
      <div class="row-fluid">
         <div class="span12">
             <ul class="nav nav-pills centerMe1">
                 <li class="active"><a href="#">adsadw er sdfw</a> </li>
                 <li><a href="#">QQQQQQQQQQQQQ</a></li>
                 <li><a href="#">some other random gibberish</a></li>
             </ul>
         </div>
      </div>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
4

2 に答える 2

1

a ブロック要素を作成するとul、全幅を占めるようになり、 を に設定できliますdisplay:inline-block。liアイテムがインラインブロックになったので、中央に配置できますtext-align:center;

ul {
    display:block;
    text-align:center;
}

li {
    display:inline-block;
}

フィドル:

http://jsfiddle.net/CZ9pX/1/

于 2013-08-14T08:25:02.747 に答える
0

あなたはただ与える必要があります

 text-align:center;

フロートを使用しないでください。使用してdisplay:blockください。

div{ text-align:center;display:block}
div span{font-size:12px;}

これにより、スパンが中央に表示されます。

于 2013-08-14T08:47:48.977 に答える