html - CSS - I can't get my menu to center(horizontally) dynamically -
मेरे पास इस तरह एक सरल लेआउट है:
& lt; html & gt; & LT; बॉडी & gt; & Lt; div & gt; & LT; ul & gt; & Lt; li & gt; & lt; a href = "#" & gt; होम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; समाचार & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; संपर्क & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; इसके बारे में & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt; & Lt; / body & gt;
लेकिन मैं यह नहीं समझ सकता कि इस मेनू को क्षैतिज और गतिशील रूप से कैसे केन्द्रित किया जाए। सीएसएस यहां है मैं सोच रहा हूं कि इसके बारे में चौड़ाई के साथ कुछ करना है & lt; उल>। लेकिन अगर मैं इसे एक निश्चित आकार में बताता हूं तो उदाहरण के लिए 500 पाउंड कहना है, तो यह गतिशील नहीं होगा। मैं इसे सूचियों के अनुसार फिट करना चाहता हूं।
आप text-align केंद्र (गैर-फ़्लाटेड) इनलाइन-ब्लॉकों वाले बच्चों:
उल {टेक्स्ट-संरेखन: केंद्र; } ली {प्रदर्शन: इनलाइन-ब्लॉक; फ्लोट: कोई नहीं; / * डिफ़ॉल्ट मान * /}
* {मार्जिन: 0; } Li: प्रथम-बच्चे {सीमा-त्रिज्या: 5px 0 0 5px; } Li: अंतिम-बच्चा (सीमा-त्रिज्या: 0 5px 5px 0; } उल {text-align: center; सूची शैली: कोई नहीं; गद्दी: 0; } एक {रंग: सफेद; text-decoration: कोई नहीं; font-size: 5vmin; } ली {प्रदर्शन: इनलाइन-ब्लॉक; पृष्ठभूमि-रंग: # 98bf21; पैडिंग: 5px 20px; } Li: मंडराना {पृष्ठभूमि रंग: # 7 ए 991 ए; }
और lt; ul & gt; & Lt; li & gt; & lt; a href = "#" & gt; होम & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; समाचार & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; संपर्क & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "#" & gt; इसके बारे में & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt;
Comments
Post a Comment