文本不对齐中心，左边

我有一个糟糕的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

文本不对齐中心，左边

回答

相关问题