浮動小数点をCSSでdivにセンタリングする

何らかの理由で、以下のコードが自分の順序付けられていないリストを中心にしていません（私はhtmlのマージンスタイルを持っています）。私はなぜ...任意のアイデアを理解することができないのですか？浮動小数点をCSSでdivにセンタリングする

HTML：

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="StyleSheet" type="text/css" href="organicForUs.css" /> 
</head> 
<body> 
    <div id="content"> 
     <img id="logo" src="logo.png" /> 
    </div> 
    <div id="footie" style="margin-left: auto; margin-right: auto;"> 
     <ul> 
      <li><p id="aboutP">about</p></li> 
      <li><p id="addP">add your store</p></li> 
      <li><p id="reportP">report a missing store</p></li> 
      <li><p id="advertiseP">advertise with us</p></li> 
     </ul> 
    </div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="organicForUs.js"></script> 
</body>

CSS：

#footie li { 
list-style-type: none; 
float: left; 
    } 
#footie p { 
font-family: sans-serif; 
font-size: 11px; 
color: white; 
font-weight: bold; 
padding-left: 10px; 
}

出典

2012-02-17 user1086348

まず、あなたは、ULの親ではなく、ULに余裕のを適用しています。 #footieではなくULを望むなら、スタイル宣言（インラインであってはいけません）を動かす必要があります。

また、マージンのために、自動トリックが機能するには、にはと宣言する必要があります。以下のようなもの：ソリューションは、上記の提案

#footie ul { 
    width: 600px; 
    margin: 0 auto; 
}

出典

2012-02-17 17:41:37 chipcullen

ああ、あなたは幅を宣言しなければならないとは気付きませんでした...ありがとう – user1086348

これは相対単位（例：パーセンテージ）でも有効です。 – chipcullen

うまくいけば、答えを受け入れることができますか？ – chipcullen

は、1つの警告があります：あなたは<のdiv>の幅を事前に指定する必要があります。より多くのアイテムがulに追加された場合、これは中断されます。

#footie { 
    float:left;  *** 
    width:100%;  *** 
    overflow:hidden; *** 
    position:relative;*** 
} 
#footie ul { 
clear:left; 
float:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; *** 
left:50%;   *** 
text-align:center; // optional, if you want to center the text 
} 
#centeredmenu ul li { 
    position:relative; *** 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    right:50%;   *** 
}

3つの星印（***）が付いている行は、これが動作するために絶対に必要な行であることに注意してください。

しかし、この解決策はより動的です。この記事を参照してください： http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

楽しんでください！

出典

2012-08-20 10:03:03

浮動小数点をCSSでdivにセンタリングする

答えて

関連する問題