CSS / HTML如何對齊文本
[英]CSS/HTML How to Align Text
問題描述
今天我想知道如何水平對齊文本。 us.mineplex.com論壇，商店，標題等完美和橫向對齊。 他們是怎么做到的？ 我試圖弄清楚自己並需要一些幫助，謝謝。
CSS：
.header_container{
width: 100%;
height: 185px;
background-color: black;
}
.navtabscontainer{
background-color: #6ED16E;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border: solid;
border-color: blue;
position: relative;
top: 180px;
height: 75px;
text-align: center;
list-style: none;
}
.headerlogo{
background-image: url('logo.png');
}
.divider{
height: 49;
width: 3px;
background-color: white;
position: absolute;
left: 109px;
top: -16px;
}
.navtabs{
color: white;
text-decoration: none;
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center;
}
* {
margin: 0;
}
.textip{
border: solid;
border-color: blue;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: red;
font-size: 20px;
position: absolute;
right: 300px;
top: 100px;
}
HTML：
<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header_container">
<h3 class="textip">Server IP: Minetage.com</h3>
<div class="header_logo">
<div class="navtabscontainer">
<ul class="navtabs">
<li href="Games">Games</i>
<li class="divider"></li>
<li href="Games">Forums</i>
<li class="divider"></li>
<li href="Games">Home</i>
<li class="divider"></li>
<li href="Games">Leaderboards</i>
<li class="divider"></li>
<li href="Games">Contact</li>
</ul>
</body>
</html>
4 個解決方案
解決方案1
2 2014-02-26 02:57:03
您可以使列表顯示為內聯，如下所示：
.navtabs li {
display:inline;
}
這樣您就不需要將空列表項作為分隔符。
如果你想將它們分開，可以在內部的錨點中添加左/右填充或邊距（如果是菜單，你還需要它）。
<ul class="navtabs">
<li><a href="myPage.htm">Games</a></i>
<li><a href="myOtherPage.htm">Stuff</a></i>
</ul>
然后
ul.navtabs li a {
display:block;
padding: 0 2em;
}
分配display:inline; 到列表項，然后display:block; 到內部的錨點允許樣式化鏈接而不需要'display：inline-block'，這會導致舊版本的IE出現問題
此外，'href' 是錨 <a> 的屬性 ，而不是列表項<li> 。 如果單擊<li> ; 使用href屬性，它不會做任何事情。
解決方案2
0 2014-02-26 02:46:46
您需要內聯顯示列表。 以下應該有效：
.navtabs li {
display:inline-block;
}
解決方案3
0 2014-02-26 02:57:43
你的問題是li默認設置為display: block; 此樣式使寬度與其父元素一樣寬。
要解決此問題，請為樣式display: inline-block所有li標記提供display: inline-block 。
示例jsfiddle
解決方案4
0 2014-02-26 03:06:11
如何在html / css中對齊文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.