मैं अपनी सामग्री div को केंद्रित करने का प्रयास कर रहा हूं। यह 100% पर सेट है, और div शरीर में समाहित है, जो 100% पर भी सेट है। मेरे पास अधिकतम-चौड़ाई: 1400px है क्योंकि मैं नहीं चाहता कि मेरी सामग्री उससे अधिक खींच सके यदि स्क्रीन रिज़ॉल्यूशन है अधिक है। बात यह है कि यह मार्जिन: ऑटो का उपयोग नहीं करता है। मेरी सामग्री बाईं ओर है, जो 1400px से अधिक चौड़ी स्क्रीन पर मौजूद है।
यदि मैं अधिकतम-चौड़ाई को हटाता हूं, तो सब कुछ पूरी तरह से विस्तृत स्क्रीन पर केंद्रित है, लेकिन सामग्री पूरी स्क्रीन तक फैली हुई है ...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
उत्तर:
उत्तर № 1 के लिए 6इसे प्राप्त करने का सबसे आसान तरीका है, सेट करना width आपके द्वारा आवश्यक अधिकतम चौड़ाई पर संपत्ति, और जोड़ें max-width: 100%;। यह इसे 100% से बड़ा होने से रोकेगा लेकिन फिर भी अधिकतम चौड़ाई तक जाएगा। साथ ही, आपको हटा देना चाहिए absolute स्थिति:
जवाब के लिए 0 № 2
Flexbox का उपयोग करें ...
इस वर्ग को मूल तत्व (निकाय) में रखें:
एचटीएमएल
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
कहा पे:
- पी flexbox माध्यम अभिभावक flexbox
- फ्लेक्स-एचसीसी माध्यम flexbox-क्षैतिज केंद्र-केंद्र
सीएसएस
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
चीयर्स, लियोनार्डो
जवाब के लिए 0 № 3
आप इसका उपयोग कर सकते हैं transform तकनीक, जिसके लिए अतिरिक्त चिह्न या मीडिया प्रश्नों की आवश्यकता नहीं होती है।
#content {
position: relative; /* "fixed" will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
यहाँ एक डेमो है https://jsfiddle.net/matharden/6uduf7av/