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.