文本不對齊中心，左邊

我有一個糟糕的CSS日。我有3列div（水平，這就是爲什麼我使用浮動），但我想對齊我的文字在中心，但在包含列div的左側。

HTML：

<div id="footer"> 
     <div class="footerColumn"> 
      <ul> 
       <li><a>Contact Us</a></li> 
       <li><a>Home</a></li> 
       <li><a>Emergency Numbers</a></li> 
      </ul> 
     </div> 
     <div class="footerColumn"> 
      <ul> 
       <li><a>Support</a></li> 
       <li><a>Privacy Policy</a></li> 
       <li><a>Terms of Use</a></li> 
       <li><a>Careers</a></li> 
      </ul> 
     </div> 
     <div class="footerColumn"> 
      <ul> 
       <li><p><a>login</a></p></li> 
       <li><a>Sign Up</a></li> 
      </ul> 
     </div> 
     <div style="clear: both;"></div> 

</div>

CSS：

#footer { 
    width: 960px; 
    margin: 0 auto; 
    padding: 10px; 
    background: url('/images/bg2.png') repeat-x center; 

    border-top: 6px solid #f3911f; 
    background: #1b1d21; 
} 
    #footer div.footerColumn { 
     position: relative; 
     float: left; 
     width: 33%; 
     margin: 0 auto; 
     text-align: justify; 
    } 
    #footer div.footerColumn ul li { 

    } 
    #footer ul li a{ 
     color: #fff;   
     font-family: Arial, sans-serif; 
     font-size: 14px; 
     text-decoration: none; 
     cursor: pointer;  
    } 
    #footer div.disclaimer { 
     color: #ccc; 
     font-family: verdana, Arial, sans-serif; 
     font-size: 12px; 

    }

看到我FIDDLE

謝謝

來源

2013-02-27 David Van Staden

爲什麼你不能中心在設計中<ul>元素是因爲<li>元素被拉伸父<ul>寬度爲100％，因此使用margin: 0 auto將無法正常工作的原因。

相反，我建議你使用display: inline-block您<ul> - 允許它只有儘可能的內部內容的寬度（子<li>元素），而不是包含元素的寬度爲100％拉伸。

對於子女<li>，可以將它們設置爲顯示爲塊元素，將它們浮動到左側，然後清除左側浮動，從而強制每個浮動元素在新行上開始（因爲您清除了左側爲每個元素浮動）。

乾脆直接提出如下的樣式：

#footer ul { 
    display: inline-block; 
    overflow: hidden; 
} 
#footer ul li { 
    display: block; 
    float: left; 
    clear: left; 
} 
#footer ul li a{ 
    color: #fff; 
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    text-decoration: none; 
    cursor: pointer;  
}

檢查這裏的小提琴;）http://jsfiddle.net/teddyrised/DvXzB/48/

來源

2013-02-27 10:07:30 Terry

謝謝你！作品魅力！ – 2013-02-27 11:41:47

不客氣，@DavidVanStaden。但是，內聯塊可能無法在IE的舊版本中正常工作......您已被警告：P – Terry 2013-02-27 12:34:35

舊版本如？因爲我並不在乎IE6和7 ...... – 2013-02-27 18:52:04

使用text-align:center在footerColumn的div。

#footer div.footerColumn { 
     position: relative; 
     float: left; 
     width: 33%; 
     margin: 0 auto; 
     text-align: center; 
    }

來源

2013-02-27 09:15:15 TNK

@大衛範·施塔登工作的？ – TNK 2013-02-27 09:26:10

nope，只是將文本居中，而不是左邊......如果你明白我的意思...... – 2013-02-27 11:36:17

#footer div.footerColumn { 
    position: relative; 
    float: left; 
    width: 33%; 
    margin: 0 auto; 
    text-align: center; /*new here*/ 
} 
#footer div.footerColumn ul { 
float: left; /*new here*/ 
}

來源

2013-02-27 09:18:45 primetwig

不好意思，不起作用。你測試過了嗎？ – 2013-02-27 18:51:03

文本不對齊中心，左邊

回答

相關問題