所以我得到了下面的代码。
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 个链接“TWITTER DEVIANTART SKYPE”不会与上面的文字“SOCIAL MEDIA”完全对齐,即使它们都居中对齐。
虽然我不知道为什么,但我希望这三个链接与上面的社交媒体文本完全居中,但事实并非如此。有什么想法吗?
这是一个显示问题的 JSFiddle:
最佳答案
这是一个更新的 fiddle 修复: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 次,它们会对齐,但不同长度的词会根据它们的宽度展开。
关于html - 文本不会正确对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19424794/