আমি কীভাবে অনুভূমিকভাবে একটি ডিভের অভ্যন্তরে স্প্যান উপাদানকে কেন্দ্র করব

Question

আমি আশেপাশের ডিভের ভিতরে দুটি লিঙ্ক 'ভিউ ওয়েবসাইট' এবং 'ভিউ প্রকল্প' কেন্দ্র করার চেষ্টা করছি। কেউ এই কাজটি করার জন্য আমার কী করা দরকার তা নির্দেশ করতে পারে?

জেএস ফিডল: http://jsfiddle.net/F6R9C/

এইচটিএমএল

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

সিএসএস

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

Comments

সংশ্লিষ্ট: stackoverflow.com/questions/7886460/...

— সিরো Santilli郝海东冠状病六四事件法轮功

উল্লম্বভাবে, আনুভূমিকভাবে বা উভয় (খাঁটি সিএসএস) এর মধ্যে উপাদানকে কেন্দ্র করার জন্য এখানে দুটি সহজ পদ্ধতি রয়েছে: স্ট্যাকওভারফ্লো.com

— মাইকেল বেঞ্জামিন

Answer 1

একটি বিকল্প হ'ল <a>ডিসপ্লে দেওয়া inline-blockএবং তারপরে text-align: center;ব্লকটি প্রয়োগ করা (ফ্লোটটিও সরিয়ে ফেলুন):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

Comments

এটি আমার জন্য একটি মাঝারি জটিল থিমের কৌশলটি করেছিল যা আমাকে কিছুটা হ্যাক করার দরকার ছিল। আমাকে পরীক্ষা করার অনুমতি দেওয়ার জন্য জেএসফিডেলের লিঙ্কটি আরও দুর্দান্ত ছিল। "ওভারফ্লো: লুকানো" থেকে "ওভারফ্লো: লুকানো" পরিবর্তন করার জন্য আমি এই এন্ট্রিটি সম্পাদনা করেছি;

— অঙ্কিত ..

দেখতে খুব পরিষ্কার সমাধান মনে হচ্ছে।

— জিম আহো

নীচে আহমেদ বাহটির উত্তর দেখুন, শৈলী = "পাঠ্য-প্রান্তিককরণ: কেন্দ্র", এটি অনেক বেশি সংক্ষিপ্ত।

— ওয়ালেস হাওয়ারি

Answer 2

আরেকটি বিকল্প হ'ল স্প্যান দেওয়া display:table;এবং এটির মাধ্যমে কেন্দ্র করাmargin:0 auto;

span {
display:table;
margin:0 auto;
}

Comments

সর্বদা একই সমস্যার বিভিন্ন বিচ্ছিন্নতা দেখতে আকর্ষণীয়।

— জিম আহো

শুধুমাত্র গত কয়েক বছরের মধ্যে আপডেট করা ব্রাউজারগুলিতে সমর্থিত। caniuse.com/#feat=css-table

— ক্যামহার্ট

সেরা সমাধান আইএমও

— মার্টিজন শেফার

Answer 3

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

Answer 4

প্রয়োগ করা হচ্ছে inline-blockউপাদান যে কেন্দ্রিক করা প্রয়োজন এবং আবেদন text-align:centerপিতা বা মাতা ব্লক আমার জন্য কৌতুক করেনি।

এমনকি <span>ট্যাগগুলিতেও কাজ করে ।

Answer 5

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

margin: 0 auto;

এগুলি কেন্দ্র করতে, তবে তারা বিভিন্ন লাইনে শেষ হয়। আমি আপনার কাঠামোর একটি ভিন্ন পদ্ধতির চেষ্টা করার পরামর্শ দেব।

এখানে আমার মাথার উপরের অংশটি বন্ধ করে রাখা জিসফিডাল এখানে রয়েছে: জেএসফিডাল

সম্পাদনা করুন:

অ্যাড্রিফ্টের উত্তর হ'ল সহজ সমাধান :)

Answer 6

আমি ধরে নিয়েছি যে আপনি এগুলি এক লাইনে কেন্দ্র করতে চান আপনার ফিডলের উপর ভিত্তি করে দুটি পৃথক লাইনে নয়। যদি এটি হয় তবে নিম্নলিখিত সিএসএস ব্যবহার করে দেখুন:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

আপনি এটি কেন্দ্রীভূত করতে চান তাই আমি ভাসাটি সরিয়ে নিয়েছি এবং তারপরে মার্জিন: 0 অটো যুক্ত করে কেন্দ্রগুলি লিঙ্কগুলির চারপাশে স্প্যানটি তৈরি করেছি। অবশেষে, আমি স্প্যানটিতে একটি স্থির প্রস্থ যুক্ত করেছি। এটি লাল ডিভের মধ্যে একটি লাইনে লিঙ্কগুলি কেন্দ্র করে।

Answer 7

কেবল সিএসএস ডিভ আপনি বিষয়বস্তু কেন্দ্র করতে পারেন

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/