একটি ডিভের মধ্যে সামগ্রীগুলি সারিবদ্ধ করুন

152

আমি এইচটিএমএল একটি ধারকের ভিতরে বিষয়বস্তু প্রান্তিককরণ করতে CSS স্টাইলের পাঠ্য-সারিবদ্ধ ব্যবহার করি use সামগ্রীটি পাঠ্য বা ব্রাউজারের আইই থাকা অবস্থায় এটি কাজ করে fine তবে অন্যথায় এটি কাজ করে না।

নামটি যেমন বোঝায় এটি মূলত পাঠ্য সারিবদ্ধ করার জন্য ব্যবহৃত হয়। সারিবদ্ধ সম্পত্তিটি অনেক আগেই অবচয় করা হয়েছে।

এইচটিএমএলে বিষয়বস্তু প্রান্তিককরণের অন্য কোনও উপায় আছে কি?

html css text-align

— হেমংশু ভোজক
সূত্র

আমাদের আরও তথ্য দিন দয়া করে? অন্যান্য ব্রাউজারে কাজ করছে না এমন কোডটি অতীত।

— শোভন

আপনার মার্কআপের একটি উদাহরণ দেওয়া উচিত যাতে লোকেরা জানতে পারে আপনি কী করতে চাইছেন। অন্যথায়, আপনার প্রশ্ন অস্পষ্ট।

— লেভিক

216

পাঠ্য-প্রান্তিককরণ পাঠ্য এবং অন্যান্য ইনলাইন সামগ্রীকে সারিবদ্ধ করে। এটি ব্লক উপাদান বাচ্চাদের সারিবদ্ধ করে না।

এটি করতে আপনি 'অটো' বাম এবং ডান মার্জিন সহ আপনি যে এলিমেন্টটি প্রস্থে প্রান্তিক করতে চান তা দিতে চান। এটি স্ট্যান্ডার্ড-কমপ্লায়েন্ট পদ্ধতি যা আই 5.x. ব্যতীত সর্বত্র কাজ করে।

<div style="width: 50%; margin: 0 auto;">Hello</div>

আইআই 6 এ কাজ করার জন্য আপনাকে একটি উপযুক্ত ডক্টইপিইপি ব্যবহার করে মানক মোড চালু আছে তা নিশ্চিত করা দরকার ।

আপনার যদি সত্যই আইই 5 / কুইর্কস মোড সমর্থন করতে হয় যা এই দিনগুলিতে আপনার সত্যিকারের উচিত নয়, কেন্দ্রীকরণে দুটি ভিন্ন পদ্ধতির একত্রিত করা সম্ভব:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(স্পষ্টতই, স্টাইলসীটের ভিতরে শৈলীগুলি সর্বোত্তমভাবে দেওয়া হয় তবে ইনলাইন সংস্করণটি চিত্রিত।

— bobince
সূত্র

2

আপনি যদি ডিভ

— আর্টেম

আমি <ডিভ স্টাইল = "প্রস্থ: 100%; মার্জিন: 0 অটো;"> হ্যালো </

— ডিভ

9

আপনি এটি এর মতোও করতে পারেন:

এইচটিএমএল

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

সিএসএস

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

আর্টেম রাশাকোভস্কি যেমন উল্লেখ করেছেন, সম্পূর্ণ বিবরণের জন্য ম্যাটিউ জেমস টেলরের মূল নিবন্ধটি পড়ুন ।

— মাহদি
সূত্র

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— কৃতী কে
সূত্র

1

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

— andreas

দুঃখিত, উপরের কোডটি পিতামাতাদের সামগ্রীতে একটি

— ডিভ

6

সত্যি বলতে, আমি এতক্ষণ দেখেছি এমন সমস্ত সমাধানকে আমি ঘৃণা করি এবং আমি আপনাকে বলছি কেন: তারা কেবল এটি সঠিকভাবে সারিবদ্ধ বলে মনে হয় না ... তাই আমি সাধারণত যা করি তা এখানে:

আমি জানি যে পিক্সেল প্রতিটি ডিভকে কী মান দেয় এবং তাদের নিজ নিজ মার্জিন ধরে ... তাই আমি নিম্নলিখিতটি করি।

আমি একটি মোড়ক ডিভি তৈরি করব যার একটি নিখুঁত অবস্থান এবং বাম মান 50% থাকবে ... সুতরাং এই ডিভিটি এখন পর্দার মাঝখানে শুরু হবে, এবং তারপরে আমি ডিভের প্রস্থের সমস্ত সামগ্রীর অর্ধেক বিয়োগ করব ... এবং আমি সুন্দরভাবে স্কেলিং সামগ্রী পেয়েছি ... এবং আমি মনে করি এটি সমস্ত ব্রাউজারগুলিতেও কাজ করে। এটি নিজের জন্য চেষ্টা করুন (উদাহরণস্বরূপ ধরে নেওয়া হয় যে আপনার সাইটের সমস্ত সামগ্রী একটি ডিভি ট্যাগে আবৃত রয়েছে যা এই মোড়ক শ্রেণিটি ব্যবহার করে এবং এতে সমস্ত সামগ্রীর প্রস্থ 200px হয়):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

সম্পাদনা: আমি যুক্ত করতে ভুলে গেছি ... আপনি প্রস্থও সেট করতে চাইতে পারেন: 0 পিএক্স; কিছু ব্রাউজারের স্ক্রোলবারগুলি না দেখানোর জন্য এই মোড়ক ডিভিতে, এবং তারপরে আপনি সমস্ত অভ্যন্তরের ডিভগুলির জন্য পরম অবস্থান ব্যবহার করতে পারেন।

এটি আপনার সামগ্রিকে উল্লম্বভাবে সারিবদ্ধ করার পাশাপাশি শীর্ষ: 50% এবং মার্জিন-শীর্ষ ব্যবহার করেও আশ্চর্যজনকভাবে কাজ করে। চিয়ার্স!

— Alexandru
সূত্র

2

এখানে আমি ব্যবহার করি এমন একটি কৌশল যা ভালভাবে কাজ করেছে:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

স্নিপেট প্রসারিত করুন

— গোয়েন্দা
সূত্র

2

নীচে সবসময় আমার জন্য কাজ করে যা পদ্ধতি আছে

ফ্লেক্স লেআউট মডেল ব্যবহার করে :

অভিভাবক ডিভের প্রদর্শনটি সেট করুন display: flex;এবং আপনি ডিভের অভ্যন্তরে শিশু উপাদানগুলিকে justify-content: center;(মূল অক্ষরে আইটেমগুলি প্রান্তিককরণ করতে) এবং align-items: center;(ক্রস অক্ষে আইটেমগুলি সারিবদ্ধ করতে ) ব্যবহার করে ডিভের অভ্যন্তরে সন্তানের সারিবদ্ধ করতে পারেন ।

আপনার যদি একাধিক সন্তানের উপাদান থাকে এবং তারা যেভাবে সাজানো হয়েছে (কলাম / সারি) নিয়ন্ত্রণ করতে চান, তবে আপনি flex-directionসম্পত্তি যুক্ত করতে পারেন ।

কাজের উদাহরণ:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

স্নিপেট প্রসারিত করুন

২. (পুরানো পদ্ধতি) অবস্থান, মার্জিন বৈশিষ্ট্য এবং নির্দিষ্ট আকার ব্যবহার করে

কাজের উদাহরণ:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

স্নিপেট প্রসারিত করুন

— nmak18
সূত্র

1

সমস্ত উত্তর অনুভূমিক প্রান্তিককরণ সম্পর্কে কথা বলতে।

একাধিক সামগ্রীর উপাদানগুলিকে উলম্বভাবে সারিবদ্ধ করার জন্য, এই পদ্ধতির দিকে একবার নজর দিন:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

স্নিপেট প্রসারিত করুন

— নিকোলাস
সূত্র

-2

এইচটিএমএল এবং সিএসএস ব্যবহার করে কেবল অন্য একটি উদাহরণ:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
সূত্র

27

আপনি যা লিখেছেন তার কোনওটিই এএসপি.এনইটি-তে নির্দিষ্ট নয়। এটি কেবল এইচটিএমএল এবং ইনলাইন সিএসএস। আপনি কি সম্পত্তি সহ কোনও সার্ভার নিয়ন্ত্রণ লিখতে চেয়েছিলেন?

— ওয়েবওয়ার্ম

1

সংশোধন করা হয়েছে। উত্তরে এখন সঠিক প্রযুক্তিগুলির উল্লেখ রয়েছে।

— জনি