অনুভূমিকভাবে এবং উল্লম্বভাবে ডিভের কেন্দ্রে কোনও টেবিলটি কীভাবে স্থাপন করবেন

Question

আমরা এর মতো পটভূমির চিত্র হিসাবে একটি চিত্র সেট করতে পারি <div>:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

আমার <div>অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে একটি টেবিল সেট করা দরকার । কোনও ক্রস-ব্রাউজার সমাধান ব্যবহার করছে CSS?

Answer 1

সেন্টারিং সিএসএসের বৃহত্তম সমস্যাগুলির মধ্যে একটি। তবে কিছু কৌশল বিদ্যমান:

আপনার টেবিলটিকে অনুভূমিকভাবে কেন্দ্র করতে, আপনি বাম এবং ডান মার্জিনটি স্বয়ংক্রিয়ভাবে সেট করতে পারেন:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

এটি উল্লম্বভাবে কেন্দ্র করতে, জাভাস্ক্রিপ্ট ব্যবহার করার একমাত্র উপায়:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

কোনও vertical-align:middleটেবিল হ'ল একটি ব্লক এবং কোনও ইনলাইন উপাদান নয় No

সম্পাদন করা

এখানে একটি ওয়েবসাইট যা সিএসএস কেন্দ্রিক সমাধানগুলি পূরণ করে: http://howtocenterincss.com/

Comments

নির্বোধ টেবিল। ধন্যবাদ, এটি (মার্জিন: 0 অটো) আমাকেও সহায়তা করেছিল।

— সিজার

testHeightএখানে কি ?

— অজয় কুলকারনী

অজয়কুলকার্নি @ #testউপাদানটির উচ্চতা । বিভ্রান্তির জন্য দুঃখিত.

— ldiqual

হ্যাঁ, আমি এটা মূর্ত আউট .... দয়া করে সম্প্রসারিত javascript, jQuery, AJAXইত্যাদি অন্যরা যাতে বুঝতে পারেন যে

— অজয় কুলকার্নি

আমার যা দরকার! আমি কয়েক ঘন্টা ধরে প্যাডিংস, মার্জিনের সাথে ফিড করছি!

— chfw

Answer 2

আমার জন্য যা কাজ করেছে তা এখানে:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

এবং এটি এটি উলম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করেছে।

Comments

এটি সেরা উত্তর হতে হবে!

— রিওপিডের

Answer 3

অনুভূমিকভাবে কেন্দ্র স্থাপন করতে আপনি বলতে পারেন width: 50%; margin: auto;। আমি যতদূর জানি, এটি ক্রস ব্রাউজার। উল্লম্ব প্রান্তিককরণের জন্য আপনি চেষ্টা করতে পারেন vertical-align:middle;, তবে এটি কেবল পাঠ্যের ক্ষেত্রেই কাজ করতে পারে। যদিও এটি চেষ্টা করে দেখুন worth

Answer 4

শুধু margin: 0 auto;আপনার যোগ করুন table। কোনও সম্পত্তি যুক্ত করার দরকার নেইdiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

দ্রষ্টব্য: এর কেন্দ্রে টেবিলের প্রান্তিককরণটি কল্পনা করতে ডিভকে ব্যাকগ্রাউন্ড রঙ যুক্ত করা হয়েছে

Answer 5

অতিরিক্তভাবে, আপনি যদি অনুভূমিকভাবে এবং উল্লম্বভাবে উভয়কেই কেন্দ্র করতে চান - একটি ফ্লো-ডিজাইনের পরিবর্তে (যেমন ক্ষেত্রে, পূর্ববর্তী সমাধানগুলি প্রয়োগ করা হয়) - আপনি করতে পারেন:

1. প্রধান ডিভিটি হিসাবে absoluteবা relativeঅবস্থান হিসাবে ঘোষণা করুন (আমি এটি বলি content) call
2. একটি অভ্যন্তরীণ ডিভ ঘোষণা করুন, যা আসলে টেবিলটি ধরে রাখবে (আমি এটি ডাকি wrapper)।
3. টেবিলটি নিজেই ডিভের ভিতরে ঘোষণা করুন wrapper।
4. এর কেন্দ্রে মোড়কের বস্তুর "রেজিস্ট্রেশন পয়েন্ট" পরিবর্তন করতে সিএসএস রূপান্তর প্রয়োগ করুন।
5. মোড়কের অবজেক্টের কেন্দ্রে মোড়ক বস্তুটিকে সরান।

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

দ্রষ্টব্য: আপনি মোড়ক ডিভ থেকে মুক্তি পেতে পারবেন না, যেহেতু এই স্টাইলটি সরাসরি টেবিলগুলিতে কাজ করে না, তাই আমি এটি আবৃত করতে এবং এটিতে অবস্থানের জন্য একটি ডিভ ব্যবহার করি, যখন টেবিলটি ডিভের অভ্যন্তরে প্রবাহিত হয়।

Answer 6

আপনি নিম্নলিখিত কৌশলটি ব্যবহার করে উল্লম্ব এবং অনুভূমিকভাবে একটি বাক্সকে কেন্দ্র করতে পারেন:

বহির্মুখী ধারক:

• উচিত display: table;

অভ্যন্তরীণ পাত্রে:

• উচিত display: table-cell;
• উচিত vertical-align: middle;
• উচিত text-align: center;

সামগ্রী বাক্স:

• উচিত display: inline-block;

আপনি যদি এই কৌশলটি ব্যবহার করেন তবে কেবলমাত্র আপনার টেবিলটি (অন্য যে কোনও সামগ্রীর সাথে আপনি এর সাথে যেতে চান) যোগ করুন সামগ্রী বাক্সে।

ডেমো:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

আরও দেখুন এই বেহালার !

Answer 7

আমি আবিষ্কার করেছি যে আমি অন্তর্ভুক্ত ছিল

body { width:100%; }

টেবিলের জন্য কাজ করতে "মার্জিন: 0 অটো" এর জন্য।