सीएसएस / एचटीएमएल मेन्यू हेडर - एचटीएमएल, सीएसएस, हेडर, सेंटर, ड्रीमविवर को सेंटर नहीं कर सकता है

मुझे सीएसएस पर मेनू केंद्रित करने में मदद चाहिए ...अगर मुझे कुछ मदद मिल सकती है तो यह बहुत अच्छा होगा! मैंने बहुत सारे तरीकों की कोशिश की है, लेकिन यह सिर्फ बाईं ओर तैरता है, चाहे मूल रूप से कोई भी हो। अगर मैं दाएं जोड़ता हूं: 50% और बाएं 50% यह केंद्र में है लेकिन फिर पृष्ठ के दाईं ओर सफेद जगह है। सीएसएस वास्तव में गन्दा है क्योंकि मैं इसे केंद्रित करने के लिए सेटिंग्स के साथ खिलवाड़ करने की कोशिश की ..

यहाँ सीएसएस है

#cssmenu,
#cssmenu ul li a,
#menu-button {
height: auto;
margin: 0px;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: auto;
}
#cssmenu ul {
clear:left;
float:left;
margin:0;
padding:0;
position:relative;
text-align:center;
}
#cssmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
text-align:center;
}
#cssmenu #menu-button {
display: none;
text-align: center;
width: auto;
}
#cssmenu {
font-family: "Oswald", sans-serif;
border-bottom: 2px solid rgba(0,0,0,.2); *Opacity*
line-height: 1;
padding: 0;
text-align: center;
opacity: 1;
position: relative;
background-color: #00a5d4;
}

एचटीएमएल यहाँ है

<div id="cssmenu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>

    #cssmenu,
#cssmenu ul li a,
#menu-button {
height: auto;
margin: 0px;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: auto;
}
#cssmenu ul {
clear:left;
float:left;
margin:0;
padding:0;
position:relative;
text-align:center;
}
#cssmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
text-align:center;
}
#cssmenu #menu-button {
display: none;
text-align: center;
width: auto;
}
#cssmenu {
font-family: "Oswald", sans-serif;
border-bottom: 2px solid rgba(0,0,0,.2); *Opacity*
line-height: 1;
padding: 0;
text-align: center;
opacity: 1;
position: relative;
background-color: #00a5d4;
}

    <div id="cssmenu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>

उत्तर:

बस यह करो:
http://jsfiddle.net/bthb0y7g/1/

< ली > में परिवर्तन:

display:inline-block;

और बाएं फ्लोट को हर जगह से हटा दें।

इस बारे में कैसा है?

एचटीएमएल

<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">CAPABILITIES</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">RFQ</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>

सीएसएस

#nav {
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
text-decoration:none;
padding:0 30px; /* variable width */
}

बेला

आप इसे एक अच्छी साधारण थीम के साथ स्टाइल भी कर सकते हैं जैसे इस?

यहाँ एक केंद्रित मेनू का एक उदाहरण है: http://jsfiddle.net/24fwb5uv/6/ यह आपके लिए प्रासंगिक होना चाहिए।महत्वपूर्ण स्टाइलिंग एक उल है जो पूरी चौड़ाई लेता है, इसके भीतर पाठ संरेखित केंद्र के साथ होता है। एलआई तत्वों को इनलाइन प्रदर्शित किया जाना चाहिए और लिंक को भी इनलाइन प्रदर्शित किया जाना चाहिए। ध्यान दें कि यदि आप चीजों को कहीं भी तैरना चाहते हैं तो इससे चीजें कठिन हो जाती हैं, लेकिन यदि आप चीजों के बारे में बहुत उधम मचाते नहीं हैं तो यह एक केंद्रित मेनू प्राप्त करने का एक तरीका है। यहाँ प्रासंगिक कोड है:

<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>

ul {
display:block;
text-align:center;
width:100%;
margin:0;
padding:0;
}

li {
display:inline;
margin:0;
padding:0;
}

a {
display:inline;
}

मैं देख रहा हूँ कि आपके मेनू के चारों ओर एक आवरण है, Iसावधान रहें कि उल पूरी चौड़ाई लेने के लिए रैपर पूरी चौड़ाई लेता है। सुनिश्चित करें कि सीएसएस "रीसेट" है, तो आपको मार्जिन निर्दिष्ट करने की आवश्यकता नहीं है: 0; पैडिंग: 0; अपने सीएसएस में या ब्राउज़र में निहित शैलियों के बारे में चिंता करें।