0
私はこのサイトを見つけて私のサイトに編集しましたが、なんらかの理由でテキストを中央に揃えることができません。NavbarのテキストをCSSで中央に揃えるには？
私はtext-align：centerを使ってみました。それは動作していないようです。 27行目は私がテキストを整列させようとしたところです。
私がしようとしているのは、Navbarの中央にリンクがあるだけで、完全なナビゲーションバーを画面全体に広げることです。だからこのように Navbar。
JSFiddleリンク：https://jsfiddle.net/dy9yLr95/
body {
padding-top: 30px;
}
/* Starter CSS for Menu */
#lostnavmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
}
#lostnavmenu ul,
#lostnavmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#lostnavmenu ul {
position: relative;
z-index: 597;
text-align: center;
}
#lostnavmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#lostnavmenu ul li.hover,
#lostnavmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#lostnavmenu ul ul {
<!-- visibility: hidden;
-->position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#lostnavmenu ul ul li {
float: none;
}
#lostnavmenu ul ul ul {
top: 0;
left: 190px;
width: 190px;
}
#lostnavmenu ul li:hover>ul {
visibility: visible;
}
#lostnavmenu ul ul {
bottom: 0;
left: 0;
}
#lostnavmenu ul ul {
margin-top: 0;
}
#lostnavmenu ul ul li {
font-weight: normal;
}
#lostnavmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#lostnavmenu {
background: #333333;
border-bottom: 4px solid #F3B016;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#lostnavmenu>ul {
*display: inline-block;
}
#lostnavmenu:after,
#lostnavmenu ul:after {
content: '';
display: block;
clear: both;
}
#lostnavmenu ul {
text-transform: uppercase;
}
#lostnavmenu ul ul {
border-top: 4px solid #F3B016;
text-transform: none;
min-width: 190px;
}
#lostnavmenu ul ul a {
background: #1b9bff;
color: #ffffff;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
font-size: 12px;
}
#lostnavmenu ul ul ul {
border-top: 0 none;
}
#lostnavmenu ul ul li {
position: relative;
}
#lostnavmenu ul ul li:first-child>a {
border-top: 1px solid #0082e7;
}
#lostnavmenu ul ul li:hover>a {
background: #4eb1ff;
color: #ffffff;
}
#lostnavmenu ul ul li:last-child>a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #1b9bff;
-webkit-box-shadow: 0 1px 0 #1b9bff;
box-shadow: 0 1px 0 #1b9bff;
}
#lostnavmenu ul ul li:last-child:hover>a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#lostnavmenu ul ul li.has-sub>a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#lostnavmenu ul li:hover>a,
#lostnavmenu ul li.active>a {
background: #F3B016;
color: #ffffff;
}
#lostnavmenu ul li.has-sub>a:after {
content: '+';
margin-left: 5px;
}
#lostnavmenu ul li.last ul {
left: auto;
right: 0;
}
#lostnavmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#lostnavmenu a {
background: #333333;
color: #CBCBCB;
padding: 0 20px;
}
#lostnavmenu>ul>li>a {
line-height: 48px;
font-size: 12px;
}
.fixedlostnavmenu {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: auto;
background-color: #00a087;
margin: 0;
text-align: center;
}
.fixedlostnavmenu li {
display: inline;
}
.fixedlostnavmenu a {
display: inline-block;
}<header>
<nav class="fixedlostnavmenu" id='lostnavmenu'>
<ul>
<li><a href='/home'><span>Home</span></a></li>
<li><a href='/forum'><span>Forum</span></a></li>
<li><a href='/vote'><span>Vote</span></a></li>
<li><a href='/shop'><span>Store</span></a></li>
<li><a href='/staff'><span>Staff</span></a></li>
<li><a href='/getwhitelisted' target="_blank"><span>Get Whitelisted</span></a></li>
</ul>
</nav>
</header>
<div>
<p>
<h1 align="center">Testing....</h1>
</p>
のコードのそのビットが仕事をしてくれたご協力いただきありがとうございます。 –