আমি কেন মার্জিন দিয়ে কেন কেন্দ্র করতে পারি না: 0 অটো?

130

আমার একটি #headerডিভ আছে যা 100% widthসেই ডিভের মধ্যেই আমার একটি আনর্ডারড তালিকা রয়েছে। আমি margin: 0 autoআনর্ডার্ড করা তালিকায় আবেদন করেছি তবে এটি শিরোনাম ডিভের মধ্যে থাকবে না।

কেউ দয়া করে আমাকে বলতে পারেন কেন? আমি ভেবেছিলাম যে আমি যদি পিতামাতার ডিভের প্রস্থটি সংজ্ঞায়িত করি তবে আনঅর্ডারড তালিকার সাথে নিজেকে কেন্দ্র করতে সক্ষম হওয়া উচিত margin: 0 auto। আমি কী মিস করছি?

আমার কোডটি এখানে:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
সূত্র

আপনি কোন ব্রাউজার ব্যবহার করছেন? আইই / উইনের মার্জিন অটো নিয়ে কিছু সমস্যা আছে।

— জেডি ফ্রিয়াস

আপনি কেন আপনার উলটিকে ডানদিকে ভাসাচ্ছেন? এটি বের করুন, এবং সম্ভবত ভাসাও: লিটির জন্য রেখে দেওয়া, এবং আপনার ভাল হওয়া উচিত।

— সাইমন

1

আমি একটি নেভিগেশন বার তৈরি করছি। আমি উলটির জন্য ডানদিকে ভাসাটি বের করেছিলাম এবং লিটির জন্য বামে রেখেছি, কিন্তু এটি এখন বাম দিকে রাখে।

— জেকডুড

135

আপনি যে উপাদানটিকে কেন্দ্র করছেন সেগুলির প্রস্থ আপনাকে পূর্বনির্ধারিত উপাদানটি নয়, নির্ধারণ করতে হবে।

#header ul {
    margin: 0 auto;
    width: 90%;
}

সম্পাদনা : ঠিক আছে, আমি এখন টেস্টপেজটি দেখেছি এবং এখানে আপনি কীভাবে চাইছেন তা আমার মনে হয়:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
সূত্র

2

যদি উল এর প্রস্থটি গতিশীল হবে। আমি পিএইচপি এর সাথে লি'র মধ্যে বিভিন্ন পাঠ্যকে গতিশীলভাবে রাখার কথা ভাবছি তাই আমি এটি অনুমান করার চেষ্টা করছি।

— জেকডুড

2

হ্যাঁ, তবে আপনি মার্জিন ব্যবহার করে কেন্দ্র করতে পারবেন না: অটো;

— প্যাট্রিক একারস্ট্রান্ড

1

আমি আপনার সর্বশেষ পরামর্শটি চেষ্টা করেছি, কিন্তু এটি কার্যকর হয়নি। আমি আপনার প্রস্তাবনাগুলির সাথে একই সংস্করণে নতুন সংস্করণটি আপলোড করেছি যাতে আপনি কী দেখতে পাচ্ছেন তা দেখতে পারেন। উলটিকে প্রায় 50px ডান দিকে ঠেলে দেওয়া হচ্ছে।

— জেকডুড

1

আমি যেমন আমার পরামর্শে বলেছিলাম,

— ভাসাটি

1

দুর্দান্ত কাজ করেছে! আমার সাথে লেগে থাকা এবং আমাকে সাহায্য করার জন্য আপনাকে অনেক ধন্যবাদ! সেই সমস্যা আমাকে মেরে ফেলছে! আবার ধন্যবাদ!

— জেকডুড

43

একটি ইনলাইন-ব্লক পুরো লাইনটি (বাম থেকে ডানে) কভার করে, সুতরাং একটি মার্জিন বাম এবং / অথবা ডান এখানে কাজ করবে না। আপনার যা দরকার তা একটি ব্লক, একটি ব্লকের বাম এবং ডানদিকে সীমানা থাকে তাই মার্জিনগুলি দ্বারা প্রভাবিত হতে পারে।

এটি আমার পক্ষে এটি কাজ করে:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
সূত্র

আপনাকে খুব দরকারী পরামর্শ দেওয়ার জন্য ধন্যবাদ, আমার একটি ইনলাইন উপাদান নিয়ে একই সমস্যা ছিল এবং আমি কেন বুঝতে পারছি না যে এটি কাজ করছে না

— মাস্তাজি

এটি সেরা উত্তর, এবং বহু আকারের উইন্ডোর জন্য কাজ করে।

— যুদা প্রবীরা

14

কেন না?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
সূত্র

আমি পাঠ্য-প্রান্তিককরণ যুক্ত করেছি: বাম; উলটিকে কেন্দ্রবিন্দুতে # হেডার উল-এ এবং পাঠ্যটিকে বামদিকে প্রান্তিক করে রাখুন। প্রস্থটি গতিশীল (অটো) হওয়ার জন্য আমাকে ইনলাইন-ব্লক হিসাবে প্রদর্শন করতে উল সেট করতে হবে।

— ব্রেন্ট সেল্ফ

3

কেন প্রথম উত্তর সেরা এক আমি জানি না, আমি এটা চেষ্টা এবং না আসলে কাজ, যেমন @ kalys.osmonov বললেন, আপনি দিতে পারেন text-align:centerকরতে header, কিন্তু আপনি করতে হবে ulযেমন inline-blockবদলে inline, এবং এছাড়াও আপনি নোটিশ আছে এটি text-alignউত্তরাধিকার সূত্রে প্রাপ্ত হতে পারে যা কিছুটা ডিগ্রি অর্জনের পক্ষে ভাল নয়, তাই আরও ভাল উপায় (IE 9 এর নীচে কাজ না করা) ব্যবহার করছে marginএবং transform। কেবল নীচের মত সরান float rightএবং margin;0 autoথেকে ul:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

ulআপনি যদি IE8 ইত্যাদি বিবেচনা না করেন তবে কেন্দ্রের গতিশীল প্রস্থ তৈরি করা এই সমস্যার সমাধান করতে পারে etc.

— বিল ডু
সূত্র

0

আমরা উল ট্যাগের জন্য প্রস্থ নির্ধারণ করতে পারি তারপরে এটি কেন্দ্রটি প্রান্তিক করবে।

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— ভানী এস
সূত্র