文字不會正確對齊到中心

HTML

  <div id="container"> 
     <p class="title"> Social Media </p> 
     <ul> 
      <li><a href="#" class="twitter">Twitter</a></li> 
      <li><a href="#" class="deviant">Deviantart</a></li> 
      <li><a href="#" class="skype">Skype</a></li> 
     </ul> 
    </div>

CSS現在

#container { 
background-color: #FFF; 
background-image: url(images/footer.jpg); 
height: 250px; 
margin-top: 40px; 
border-top: 3px solid #C6C6C6; 
border-bottom: 3px solid #C6C6C6; 
} 

p.title { 
color: #FFF; 
font-family: "Open Sans", Helvetica, sans-serif; 
text-align: center; 
font-weight: bold; 
text-transform: uppercase; 
letter-spacing: 5px; 
font-size: 24px; 
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); 
} 


#container ul { 
text-align: center; 
word-spacing: 150px; 
margin: 0; 
padding: 0; 
} 

#container ul li { 
display: inline; 
font-family: "Open Sans", Helvetica, sans-serif; 
font-size: 18px; 
font-weight: bold; 
} 

#container > ul > li > a { 
text-decoration: none; 
color: #FFF; 
letter-spacing: 5px; 
text-transform: uppercase; 
line-height: 3; 
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); 

}

，問題是，3個環節「推特DeviantArt的SKYPE」不會是齊如上面的文字說：「社會媒體」，即使這既是與中心對齊。

我不知道爲什麼，但我希望這三個鏈接的中心與上面的社交媒體文本完全一樣，但事實並非如此。有任何想法嗎？

這裏有一個的jsfiddle顯示問題：

http://jsfiddle.net/cuLgC/

來源

2013-10-17 xDrac

在Firefox中，它對齊正確。它發生在特定的瀏覽器上嗎？ –

@xDrac其工作完全正確，whats問題？，哪個瀏覽器您檢查此源代碼？ – falguni

這裏有一個更新的撥弄修復：JSFiddle

的變化說明如下：

#container ul { 
    /* text-align: center; moved to li */ 
    /* word-spacing: 150px; removed, this was causing issue as some words are longer */ 
    width: 100%; 
    display: table;  /* added */ 
    table-layout: fixed; /* added */ 
    margin: 0; 
    padding: 0; 
} 

#container ul li { 
    display: table-cell; /* added */ 
    width: auto;   /* added */ 
    text-align: center; /* moved */ 
    /* display: inline; removed */ 
    font-family: "Open Sans", Helvetica, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
}

的錯位正被造成的：word-spacing: 150px;和事實的菜單選項都是不同的寬度。如果你使用同一個單詞3次，他們會對齊，但不同長度的單詞根據它們的寬度進行傳播。

來源

2013-10-17 11:22:35 Tanner

謝謝！這對我有用！ – xDrac

只是將顯示從'display：inline'更改爲'display：block'會更快更好地修復，因爲表格不適用於佈局，但是可以工作 – Crouch

@打開您的建議將項目移動到另一個之下，這不是問題的要求。 – Tanner

不是最好的方式，但我把<br>兩個列表中的元素之後，並且滴下來。

http://jsfiddle.net/cuLgC/7/

來源

2013-10-17 11:06:57 SaturnsEye

變化

container ul li{ 
display: inline 
}

要

container ul li{ 
display: block 
}

http://jsfiddle.net/cuLgC/6/

顯示直列把他們一個行塊把它們放在單獨的行，希望這有助於它在小提琴。

來源

2013-10-17 11:09:30 Crouch

只需添加<br>標籤列表....這裏是爲小提琴.. [的jsfiddle] [1]

[1]：http://jsfiddle.net/hh54D/7/希望這是正確的...

來源

2013-10-17 11:09:32

如果我理解正確的話：

#container { 
background-color: #FFF; 
background-image: url(images/footer.jpg); 
height: 250px; 
margin-top: 40px; 
border-top: 3px solid #C6C6C6; 
border-bottom: 3px solid #C6C6C6; 
} 

p.title { 
color: #FFF; 
font-family: "Open Sans", Helvetica, sans-serif; 
text-align: center; 
font-weight: bold; 
text-transform: uppercase; 
letter-spacing: 5px; 
font-size: 24px; 
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); 
} 


#container ul { 
text-align: center; 
word-spacing: 150px; 
margin: 0; 
padding: 0; 
} 

#container ul li { 
/*display: inline;*/ 
float: left; 
list-style: none; 
width: 33.3%;  
font-family: "Open Sans", Helvetica, sans-serif; 
font-size: 18px; 
font-weight: bold; 
} 

#container > ul > li > a { 
text-decoration: none; 
color: #FFF; 
letter-spacing: 5px; 
text-transform: uppercase; 
line-height: 3; 
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); 
}

FIDDLE

來源

2013-10-17 11:16:28

文字不會正確對齊到中心

回答

相關問題