সিএসএস সেন্টার ইনলাইন ব্লক প্রদর্শন?

Question

আমার এখানে একটি কার্যকরী কোড রয়েছে: http://jsfiddle.net/WVm5d/ (সারিবদ্ধ কেন্দ্রের প্রভাব দেখতে আপনাকে ফলাফল উইন্ডোটি আরও বড় করতে হতে পারে)

প্রশ্ন

কোডটি ভাল কাজ করে তবে আমি থাকতে পছন্দ করি না display: table;। মোড়ানো শ্রেণীর সারিবদ্ধ কেন্দ্রটি তৈরি করতে পারার একমাত্র উপায়। আমি মনে করি এটি ব্যবহার করার উপায় display: block;বা থাকলে আরও ভাল হত display: inline-block;। সারিবদ্ধ কেন্দ্রে অন্যভাবে সমাধান করা সম্ভব?

ধারকটিতে স্থির যোগ করা আমার পক্ষে কোনও বিকল্প নয়।

ভবিষ্যতে যদি জেএস ফিডাল লিঙ্কটি নষ্ট হয়ে যায় তবে আমি এখানে আমার কোডটিও পেস্ট করব:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Answer 1

display: inline-block100% প্রস্থের পিতামাতার মধ্যে অনুভূমিকভাবে এবং উল্লম্বভাবে উভয় কেন্দ্রীভূত হওয়াতে আমার সাথে একটি শিশু উপাদান থাকা দরকার বলে গৃহীত সমাধানটি আমার পক্ষে কার্যকর হবে না ।

আমি ফ্লেক্সবক্স justify-contentএবং align-itemsবৈশিষ্ট্যগুলি ব্যবহার করেছি , যা যথাক্রমে আপনাকে অনুভূমিকভাবে এবং উল্লম্বভাবে উপাদানগুলিকে কেন্দ্র করে। centerপিতামাতার উভয়কে সেট করে , সন্তানের উপাদান (বা একাধিক উপাদান!) পুরোপুরি মাঝখানে হবে।

এই সমাধানটির জন্য নির্দিষ্ট প্রস্থের প্রয়োজন হয় না, যা আমার জন্য অনুপযুক্ত ছিল কারণ আমার বোতামের পাঠ্যটি পরিবর্তিত হবে।

এখানে একটি কোডপেন ডেমো এবং নীচে সম্পর্কিত কোডের স্নিপেট রয়েছে:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Comments

এই প্রশ্নটি ফ্লেক্সবক্সের আগে তৈরি হয়েছিল তবে এখন এই পদ্ধতির আরও ভাল, আমি এটি উত্তর হিসাবে গ্রহণ করেছি।

— জেনস টার্নেল

@ জেনস টার্নেল ইনলাইন-ব্লকের ব্যবহার নিরর্থক এক্ষেত্রে এটি অপসারণ করা যেতে পারে

— তেমনি আফিফ ২

এটি পাঠ্য-প্রান্তিককরণ কেন্দ্রটি ব্যবহার করার চেয়ে অনেক ভাল। এই বাস্তবায়নটি সমস্ত সন্তানের উপাদানগুলিতে কেবল পাঠ্য-কেন্দ্রিক ফাঁস করে। এটা করবেন না।

— ট্রেস করুন

Answer 2

এটা চেষ্টা কর. আমি text-align: centerশরীরে এবং display:inline-blockমোড়কে যুক্ত করেছিলাম এবং তারপরে আপনার সরিয়েছিdisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Comments

ইনলাইন-ব্লক হিসাবে প্রদর্শিত হলে @ জ্যাক ডিভগুলি পাঠ্যের মতো কাজ করে। আপনি এগুলিতেও স্টাফ ব্যবহার করতে পারেন white-space: nowrap;।

— ব্যবহারকারী 2

এবং আমি যদি চাই না যে আমার সমস্ত উপাদানগুলিকে bodyটেক্সট-সারিবদ্ধ কেন্দ্রে স্থাপন করা হয়েছে ?? এটি আমার কাছে বিশাল ওভারকিলের মতো শোনাচ্ছে

— phil294

@ ব্লাউহিরন, কেবল ইনলাইন-ব্লক উপাদানটির অভ্যন্তরে একটি ব্লক মোড়ক তৈরি করুন এবং তারপরে সিএসএসের সম্পত্তি পাঠ্য-সারিবদ্ধ করুন: কেন্দ্র; তিনি উদাহরণ হিসাবে শরীরের ট্যাগ ব্যবহার।

— আরসালান শেখ

Answer 3

যদি আপনার <div>সাথে থাকে text-align:center;তবে এর অভ্যন্তরের যে কোনও পাঠ্য সেই ধারক উপাদানটির প্রস্থের সাথে সম্পর্কিত হবে। inline-blockউপাদানগুলি এই উদ্দেশ্যে পাঠ্য হিসাবে বিবেচিত হয়, সুতরাং সেগুলিও কেন্দ্রিক হবে be

Comments

প্রদর্শন সম্পর্কে: ইনলাইন উপাদানগুলি কীভাবে? আমি পরীক্ষা করেছি এটি এটি যেভাবে প্রত্যাশা করছে সেভাবে কাজ করছে না

— গেককব

Answer 4

আপনি পজিশনিং সহ এটিও করতে পারেন, পিতামাতার ডিভকে আপেক্ষিক এবং শিশু ডিভকে পরম করতে পারেন।

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Answer 5

আপনার "প্রদর্শন: টেবিল" ব্যবহার করার দরকার নেই। আপনার মার্জিনের কারণ: 0 স্বয়ংক্রিয় কেন্দ্রীকরণের প্রচেষ্টা কাজ করে না কারণ আপনি কোনও প্রস্থ নির্দিষ্ট করেন নি।

এটি ঠিক কাজ করবে:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

আপনাকে প্রদর্শন নির্দিষ্ট করার দরকার নেই: যে ডিভটি ডিফল্টরূপে ব্লক হয়ে থাকবে। আপনি সম্ভবত ওভারফ্লোও হারাতে পারেন: গোপন।

Answer 6

@ বিজয়স্কোডের উত্তরের মতো, এটি অনুভূমিকভাবে একটি ইনলাইন-ব্লক উপাদানকে কেন্দ্র করবে (তবে তার পিতামাতার স্টাইলগুলিকেও পরিবর্তন করার প্রয়োজন ছাড়াই):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Answer 7

আমি সবেমাত্র 2 পরামিতি পরিবর্তন করেছি:

.wrap {
    display: block;
    width:661px;
}

সরাসরি নমুনা

Comments

একটি স্থির সেট করা আমার পক্ষে কোনও বিকল্প নয়। আর একটি সমাধান খুঁজে পেয়েছি। যাই হোক ধন্যবাদ.

— জেনস টার্নেল

তাহলে এটা কি ছিল?

— রিচিএইচএইচ এইচ

Answer 8

দুর্দান্ত নিবন্ধটি আমি খুঁজে পেলাম যে আমার জন্য সবচেয়ে ভাল কাজ করেছে তা হল আকারে একটি% যুক্ত করা

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Answer 9

শুধু ব্যবহার করুন:

line-height:50px

আপনার ডিভের মতো একই উচ্চতার সাথে "50px" প্রতিস্থাপন করুন।

Comments

কোথায় যুক্ত করবেন দয়া করে আরও নির্দিষ্ট করুন line-height।

— মার্সেল গওয়ার্ডার

মূল প্রশ্নটি অনুভূমিক কেন্দ্রীকরণ সম্পর্কে ছিল, যেমন ব্যবহারের দ্বারা নির্দেশিত text-align: center;। লাইন-উচ্চতা সামঞ্জস্য করা উল্লম্ব কেন্দ্রীকরণের জন্য একটি সমাধান, যদিও কোনও ইনলাইন-ব্লকের জন্য খুব দৃ not় সমাধান নয়।

— cdddr