আমি অনুভূমিক <ul> মেনুটিকে কীভাবে কেন্দ্র করব?

Question

আমার একটি অনুভূমিক মেনুতে মাঝখানে সারিবদ্ধ হওয়া দরকার।
আমি inline-block/ block/ center-alignইত্যাদি মিশ্রণ সহ বিভিন্ন সমাধান চেষ্টা করেছি , তবে সফল হইনি।

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

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

হালনাগাদ

আমি জানি কিভাবে কীভাবে মধ্যবর্তী স্থিতিশীল করতে ulহয় div। এটি সরফরাজের পরামর্শ ব্যবহার করে সম্পন্ন করা যেতে পারে। তবে তালিকার আইটেমগুলি এখনও বাম দিকে রইল ul।

এটি সম্পাদন করার জন্য আমার কি জাভাস্ক্রিপ্ট দরকার?

Comments

প্রতিটি এলআইতে পাঠ্যটি কেন্দ্র করে রাখুন বা ডিআইভির অভ্যন্তরে ইউএলটি কেন্দ্র করবেন?

— জোপ

Answer 1

Http://pmob.co.uk/pob/centred-float.htm থেকে :

অনুমানটি সহজ এবং মূলত কেবলমাত্র একটি প্রস্থবিহীন ফ্লোটের মোড়কে জড়িত যা বাম দিকে ভাসানো হয় এবং তারপরে স্ক্রিনটি বাম প্রস্থের অবস্থানে স্থানান্তরিত করে: আপেক্ষিক; বাকি আছে: -50%। এর পরে নেস্টেড অভ্যন্তরীণ উপাদানটি বিপরীত হয় এবং + 50% এর আপেক্ষিক অবস্থান প্রয়োগ করা হয়। এটি কেন্দ্রের মধ্যে উপাদানটি মৃত রাখার প্রভাব ফেলে। আপেক্ষিক অবস্থানগুলি প্রবাহ বজায় রাখে এবং অন্যান্য সামগ্রীকে নীচে প্রবাহিত করতে দেয়।

কোড

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

Comments

লিঙ্ক পচা রোধ করতে আপনি দয়া করে এই উত্তরে কিছু কোড বা প্রসঙ্গ যুক্ত করতে পারেন?

— নাইটফায়ারকেট

সমাধানটি দুর্দান্ত কাজ করে এবং আমি এত দীর্ঘ সময় পরে এটি জিজ্ঞাসা করার জন্য দুঃখিত, তবে আমার যদি কোনও সিএসএস ড্রপ ডাউন হয় তবে কী হবে? আমি ওভারফ্লো ব্যবহার করতে পারি না: তখন পিতামাতার মধ্যে লুকানো। কিন্তু এটি এখনও এখানকার মত ওভারফ্লো করব homeafrika.com ।

— সামিয়া রুপন্তি

আসলে সেই সাইটে কোনও ওভারফ্লো দেখতে পাবেন না। আমি নিশ্চিত না যে আপনার ওভারফ্লো দরকার: লুকানো; কিছুটা হলেও, এটি যেহেতু অনুভূমিক ওভারফ্লো জন্য, আপনি সর্বদা ওভারফ্লো-এক্স চেষ্টা করতে পারেন: লুকানো; পরিবর্তে. webchat.freenode.net/?nick=oerflowono&channels=# রিয়েল-টাইম সহায়তার জন্য ওয়েবসাইট।

— রিসিও

সমাধানটি মেনুটিকে সুন্দরভাবে কেন্দ্র করে, তবে আপনার যদি সাবমেনাস থাকে যা একটি নির্দিষ্ট স্থিতিতে হোভারের জন্য খোলা উচিত, আপনি ডুম্মড position: relativeহবেন যেহেতু মূল মেনুটির position:absoluteসাব মেনুটির আচরণ পরিবর্তন করে ।

— cweiske

@ রিসিও ওপির #buttonsপ্রশ্নের আইডি কোথায় আছে ? আপনার জবাবে কোথায় নোটিশ পাওয়া যায়, তাকে এটি ব্যবহার করতে হবে? এটি কীভাবে গ্রহণযোগ্য এবং শীর্ষ-ভোটযুক্ত উত্তর হতে পারে, যদি আপনি কেবল কোনও লিঙ্ক থেকে কিছু অফ-টপিক ব্লাহ-ব্লাহকে উদ্ধৃত করে প্রশ্নের উত্তর দিচ্ছেন না ?

— ট্রেজার্ড

Answer 2

এটি আমার পক্ষে কাজ করে। আমি যদি আপনার প্রশ্নটি ভুল ধারণা না করে থাকি তবে আপনি এটি ব্যবহার করে দেখতে পারেন।

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Comments

@cweiske এর সাথে একমত কেবল একটি পাঠ্য-প্রান্তিককরণ ব্যবহার করে: অন্তর্ভুক্ত ডিভের কেন্দ্রটি আমার জন্য সমস্যাটি সমাধান করেছে

— কিম স্ট্যাকস

ভিতরে কেবল কোনও পাঠ্য একটি পেয়েছে তা নিশ্চিত করতে হবেtext-align: left;

— হুয়ান মেন্ডেস

এটি খুবই সুন্দর! তবে, উলটির বামদিকে ডিফল্ট প্যাডিং রয়েছে যার অর্থ মেনুটি কেন্দ্রের ডানদিকে টানছে। আপনার প্যাডিং-বাম সহ উল থেকে ডিফল্ট প্যাডিং সরিয়ে ফেলতে হবে: 0;

— ইটরেটিভ জিপসি

গ্রহণযোগ্য সমাধানের চেয়ে পুরোপুরি আরও ভাল উত্তর, প্রদর্শন ব্যবহার: ইনলাইনটি কৌশলটি করে। ভাসা ব্যবহার করবেন না, এটি অত্যধিক জটিল। অন্তর্দৃষ্টি @ রুবস্তো জন্য ধন্যবাদ

— ক্লেইন

লি-এ পাঠ্য সারিবদ্ধ কেন্দ্রটি অপ্রয়োজনীয়

— আমিনাহ নুরাইনি

Answer 3

CSS3 ফ্লেক্সবক্স সহ। সহজ।

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

Comments

আমি স্পষ্টভাবে এই পদ্ধতি সুপারিশ করবে

— Caraş

আমিও নির্বাচিত উত্তরের উপর এই পদ্ধতির সুপারিশ করব।

— মিকবার্কেজনার

আমি তোমার বিয়ারের মালিক!

— সুয়াশ দীক্ষিত

আমাকে বলতে হবে যে আমি ন্যায়সঙ্গত-সামগ্রী উভয়ের আগে কখনও ফ্লেক্স ব্যবহার করি নি। দুর্দান্ত উত্তর

— Gman

দুর্দান্ত উত্তর beero

— ইলিয়াস করিম

Answer 4

এটি আমি খুঁজে পেয়েছি সবচেয়ে সহজ উপায়। আমি আপনার এইচটিএমএল ব্যবহার করেছি। প্যাডিংটি ব্রাউজারের ডিফল্টগুলি পুনরায় সেট করার জন্য।

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

Answer 5

কোনও হ্যাক এবং সম্পূর্ণ ক্রস ব্রাউজার সমর্থন ছাড়াই এটি কীভাবে সুন্দর রক-শক্ত পদ্ধতিতে করা যায় সে সম্পর্কে একটি নিবন্ধ এখানে। আমার জন্য কাজ কর:

-> HTTP:

Comments

লিঙ্কটি নিচে নামার ক্ষেত্রে আপনি কি এর সংক্ষিপ্তসার পোস্ট করতে পারেন?

— অ্যালেক্স

Answer 6

এটা চেষ্টা কর:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Comments

এটি ইউএলকে কেন্দ্র করে কাজ করে। তবে <LI> এখনও ভাসমান বামে। আমি <<> <ul> এর মধ্যে কেন্দ্রীভূত থাকতে চাই। এটা কি সম্ভব?

— স্টিভেন

Answer 7

এটা এভাবে করো :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

এবং সিএসএস:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Answer 8

আপনার অনেকের মতো আমিও কিছুদিন ধরে এই নিয়ে লড়াই করে যাচ্ছি। সমাধানটি শেষ পর্যন্ত ইউলযুক্ত ডিভের সাথে করতে হয়েছিল। উল এর প্যাডিং, প্রস্থ ইত্যাদি পরিবর্তন করার বিষয়ে সমস্ত পরামর্শের কোনও প্রভাব ছিল না, তবে নিম্নলিখিতটি কার্যকর হয়েছিল।

এটি সমস্ত margin:0 auto;ডিভযুক্ত ডিভ সম্পর্কিত আমি আশা করি এটি কিছু লোককে সহায়তা করে এবং অন্য সকলের সাথে যারা ইতিমধ্যে এটির পরামর্শ দিয়েছিলেন তাদের সবাইকে ধন্যবাদ।

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

Answer 9

ডেমো - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

ওম এত ক্লিনার।

Answer 10

সাধারণত একটি কালো স্তরের উপাদান কেনার উপায় বলতে (যেমন একটি <ul>) margin:auto;সম্পত্তি ব্যবহার করা হচ্ছে ।

একটি ব্লক স্তর উপাদান ব্যবহারের মধ্যে পাঠ্য এবং ইনলাইন স্তরের উপাদানগুলিকে সারিবদ্ধ করতে text-align:center;। সুতরাং সব একসাথে যেমন কিছু ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... কাজ করা উচিত.

ফ্রিন্জ কেসটি ইন্টারনেট এক্সপ্লোরার 6 ... বা অন্য আই-এস ব্যবহার না করে <!DOCTYPE>। আই 66 ব্যবহার করে ব্লক স্তরের এলিমেন্টগুলি ভুলভাবে প্রান্তিক করে text-align। সুতরাং আপনি যদি আই 6 কে সমর্থন করছেন (বা একটি ব্যবহার করছেন না <!DOCTYPE>) আপনার সম্পূর্ণ সমাধানটি হ'ল ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

পাদটীকা হিসাবে, আমি মনে করি id="topmenu firstlevel"যে কোনও idঅ্যাট্রিবিউটে স্পেস থাকতে পারে না তাই এটি অবৈধ ...? প্রকৃতপক্ষে ডাব্লু 3 সি সুপারিশটিid বৈশিষ্ট্যটিকে একটি 'নাম' টাইপ হিসাবে সংজ্ঞায়িত করে ...

আইডি এবং NAME টোকেনগুলি অবশ্যই একটি অক্ষর ([এ-জা-জেড]) দিয়ে শুরু হওয়া উচিত এবং এর পরে সংখ্যক বর্ণ, অঙ্ক ([0-9]), হাইফেনস ("-"), আন্ডারস্কোর ("_") হতে পারে , কলোন (":"), এবং পিরিয়ড ("।")।

Answer 11

আমি প্রদর্শনটি ব্যবহার করেছি: ইনলাইন-ব্লক সম্পত্তি: সমাধানটি নির্দিষ্ট প্রস্থ সহ একটি মোড়কে ব্যবহার করে। ভিতরে, প্রদর্শনের জন্য ইনলাইন-ব্লক সহ উল ব্লক। এটি ব্যবহার করে উল আসল সামগ্রীর প্রস্থ গ্রহণ করবে! এবং শেষ অবধি মার্জিন: 0 অটো, এই ইনলাইন-ব্লকটি কেন্দ্র করতে =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

Answer 12

আমি এই জন্য jquery কোড ব্যবহার। (বিকল্প সমাধান)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

Answer 13

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

উল হিসাবে ইনলাইন-টেবিলটি সমস্যাটি সমাধান করে। আমি পাঠ্যকে কেন্দ্রে প্রান্তিককরণ করতে পিতামাতার ডিভ ব্যবহার করেছি। এইভাবে এটি অন্যান্য ভাষায়ও ভাল দেখাচ্ছে (অনুবাদ, বিভিন্ন প্রস্থ)

Answer 14

@ রোবস্টোর সমাধানটি আমি যা করার চেষ্টা করছিলাম তার পক্ষে সবচেয়ে সহজ ছিল, আমি আপনাকে এটি ব্যবহার করার পরামর্শ দিই। আমি একটি গ্যালারী তৈরি করতে আনর্ডারড তালিকার চিত্রগুলির জন্য একই জিনিসটি করার চেষ্টা করছিলাম ... আমি এটির সাথে বোকা বানানোর জন্য একটি জেএস ফিডাল তৈরি করেছি। এটি চেষ্টা করুন নির্দ্বিধায় ।

[এটি রোবস্টোর নমুনা কোড ব্যবহার করে স্থাপন করা হয়েছে]
এইচটিএমএল:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

সিএসএস:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

Answer 15

ul{margin-left:33%}

বড় পর্দার একটি শালীন অনুমান। এটি ভাল নয়, তবে একটি ভাল নোংরা ফিক্স।

Answer 16

.topmenu-design
{
    display: inline-table;
}

এইটুকুই!