প্যারেন্ট পাত্রে উচ্চতার শতাংশ হিসাবে মার্জিন বা প্যাডিং কীভাবে সেট করবেন?

Question

নিম্নলিখিতটি ব্যবহার করে আমি সিএসএসে উল্লম্ব প্রান্তিককরণ তৈরি করার বিষয়ে আমার মস্তিষ্কগুলি র‌্যাক করছিলাম

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

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

জাভাস্ক্রিপ্ট ব্যবহার না করেই প্যাডিং এবং / অথবা মার্জিনটি উচ্চতার শতাংশ হিসাবে সেট করার কোনও উপায় আছে?

Answer 1

ফিক্সটি হ'ল হ্যাঁ, উল্লম্ব প্যাডিং এবং মার্জিন প্রস্থের সাথে তুলনামূলক, তবে topএবং bottom তা নয়।

সুতরাং কেবল অন্যের মধ্যে একটি ডিভ রাখুন, এবং অভ্যন্তরীণ ডিভের মধ্যে, এমন কিছু ব্যবহার করুন top:50%( positionবিষয়গুলি মনে রাখবেন যদি এটি এখনও কাজ করে না)

Comments

topব্রাউজার / উইন্ডো উচ্চতার উপর নির্ভর করে আকার পরিবর্তন করতে দুর্দান্ত কাজ করে। Div ডিভের নীচে ডিভ থাকার কীভাবে? আপনি কীভাবে clear২ য় ডিভটি ডিভের নীচে হতে পারেন যা একটি দ্বারা স্থানান্তরিত হয়েছে top:50%??

— ফেডেরিকো

নতুন শিখুন। উল্লম্ব প্যাডিং জানতেন না এবং মার্জিনটি প্রস্থের সাথে প্রাসঙ্গিক। ধন্যবাদ.

— shaosh

সেট শতাংশের উচ্চতা সহ একটি 'স্পেসার' ডিভ যোগ করাও সম্ভব। দেখে মনে হচ্ছে কিছুটা নোংরা কিন্তু এটি কাজ করে। দেখতে এই উত্তর ।

— WCByrne

কি চিরকালীন @%! ^? উল্লম্ব মার্জিন এবং প্যাডিং প্রস্থের সাথে তুলনামূলক কেন ? কি? কেন পৃথিবীতে এই সিদ্ধান্ত নেওয়া হয়েছিল?

— অস্থায়ী_ ব্যবহারকারী_নাম

আপনার উত্তরটি নীচে আলাইনের উত্তরের তুলনায় অত্যন্ত অসম্পূর্ণভাবে আপ-ভোট হয়েছে, যা একটি সাধারণ সমাধান দেয় এবং আমি এটি খুব সহায়ক বলে মনে করি এবং এটি প্রায় দেখেনি। top: 50%আপনি যদি তাদের নিজস্ব কেন্দ্র অনুসারে সামগ্রীগুলি সারিবদ্ধ করতে চান তবে এটি খুব কার্যকর নয় useful

— Okovko

Answer 2

কিছুটা আলাদা প্রশ্নের উত্তর: আপনি ভিউপোর্টেরvh কেন্দ্রে উপাদানগুলিকে প্যাড করতে ইউনিটগুলি ব্যবহার করতে পারেন :

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

Comments

এই উত্তর কেন বেশি ভোট হয় না? ভিএইচ ব্যবহার করে কিছু ভুল আছে?

— অ্যালানহ

এটি কারণ যে এটি কোনও প্রশ্নের উত্তর নয় যা মূল প্রশ্নের সাথে তৈরি, এটি একটি দরকারী কৌশল যা কেবলমাত্র কয়েকটি সম্পর্কিত ক্ষেত্রে কাজ করে।

— willoller

ব্যবহার vhপ্রায় শতাংশের মতোই ... কিছু ক্ষেত্রে আরও খারাপ। এই উত্তর প্রশ্নের অপ্রাসঙ্গিক

— vsync

Answer 3

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

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

প্রথম বিকল্প: সিউডো-উপাদানগুলি ব্যবহার করুন, এখানে উল্লম্ব এবং অনুভূমিক ব্যবধানটি বাইরের সাথে সম্পর্কিত to ডেমো

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

অনুভূমিক ব্যবধানটি বাইরের উপাদানটিতে সরিয়ে নেওয়া এটিকে বাইরের পিতামাতার সাথে সম্পর্কিত করে তোলে। ডেমো

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

দ্বিতীয় বিকল্প: পরম অবস্থান ব্যবহার করুন। ডেমো

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

Answer 4

সন্তানের উপাদানটিকে তার পিতামণ্ডল উপাদান থেকে একেবারে অবস্থিত করতে আপনাকে পিতামাত্ত্বিক উপাদানের উপর তুলনামূলক অবস্থান এবং সন্তানের উপাদানের উপর পরম অবস্থান নির্ধারণ করতে হবে।

তারপরে শিশু উপাদানটির উপরে 'শীর্ষ' পিতামাতার উচ্চতার সাথে সম্পর্কিত। সুতরাং আপনার নিজের উচ্চতার 50% শিশুকে upর্ধ্বমুখী করে 'অনুবাদ' করতে হবে।

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

ফ্লেক্স বক্স ব্যবহার করে আরও একটি সমাধান রয়েছে।

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

আপনি উভয়ের জন্য সুবিধাগুলি / অপব্যবহারগুলি পাবেন।

Comments

অনুবাদটি ব্যবহার করা কোনও উপাদানকে তার নিজের আকারের সাথে উল্লম্বভাবে সরানোর একমাত্র আসল উপায়।

— ইরান গোল্ডিন

এর জন্য ধন্যবাদ. এটি নির্বাচিত উত্তর হওয়া উচিত।

— ওয়াসাম এল মাহডি

Answer 5

writing-modeসম্পত্তি দিয়ে এটি অর্জন করা যেতে পারে । আপনি যদি কোনও উপাদানকে writing-modeউল্লম্ব রাইটিং মোডে সেট করেন vertical-lr, যেমন , উভয় মাত্রায় প্যাডিং এবং মার্জিনের জন্য এর বংশধরের শতাংশের মানগুলি প্রস্থের পরিবর্তে উচ্চতার সাথে আপেক্ষিক হয়ে ওঠে।

অনুমান থেকে :

। । । মার্জিন এবং প্যাডিং বৈশিষ্ট্যগুলির শতাংশ, যা সর্বদা CSS2.1 এ থাকা ব্লক প্রস্থের সাথে সম্মতভাবে গণনা করা হয়, CSS3- এ থাকা ব্লকটির ইনলাইন আকারের সাথে সম্মতিতে গণনা করা হয় ।

ইনলাইন আকারের সংজ্ঞা :

ইনলাইন মাত্রাটির একটি পরিমাপ: অনুভূমিক লেখার মোডগুলিতে দৈহিক প্রস্থ (অনুভূমিক মাত্রা) এবং উল্লম্ব লেখার মোডগুলিতে দৈহিক উচ্চতা (উল্লম্ব মাত্রা) বোঝায়।

উদাহরণস্বরূপ, একটি আকার পরিবর্তনকারী উপাদান সহ, যেখানে অনুভূমিক মার্জিন প্রস্থের সাথে তুলনামূলকভাবে এবং উল্লম্ব মার্জিনগুলি উচ্চতার সাথে আপেক্ষিক।

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

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

Comments

এটি, আইএমও, আরও মার্জিত সমাধান হতে পারে তবে (2018-05-05 অনুযায়ী) উল্লম্ব লেখার মোডগুলি ভাল সমর্থন করে না । আশা করি শিগগিরই তা বদলে যাবে।

— জ্যানারক

@ অ্যানজারক আমি মোটামুটি নিশ্চিত যে এমডিএন কম্প্যাট টেবিলটি পুরানো। উদাহরণস্বরূপ, এটি বলে যে সাফারিটির উপসর্গের প্রয়োজন আছে -webkit-, তবে ক্যানিয়াস অনুসারে সাফারি ১১-এর পরে এটির উপসর্গের প্রয়োজন হয়নি? আপনি কি এমন কোনও ব্রাউজার দিয়ে চেষ্টা করেছিলেন যেখানে এটি কাজ করেনি?

— জেমস টি

না, আমাকে স্বীকার করতে হবে আমি ঠিক ধরেছিলাম এটি ভাল, স্বয়ংক্রিয়ভাবেও হয়েছিল।

— জ্যানারক

Answer 6

এক লাইনের পাঠ্যকে কেন্দ্র করার অন্যান্য উপায় হ'ল:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

বা শুধু

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

Answer 7

একটি 50% প্যাডিং আপনার শিশুকে কেন্দ্র করে না, এটি এটিকে কেন্দ্রের নীচে রাখবে। আমি মনে করি আপনি সত্যিই 25% এর প্যাডিং-টপ চান। আপনার বিষয়বস্তু লম্বা হওয়ার সাথে সাথে আপনি কেবল স্থান ছাড়িয়ে চলেছেন? এছাড়াও আপনি প্যাডিং-টপের পরিবর্তে মার্জিন-টপ সেট করার চেষ্টা করেছেন?

সম্পাদনা: কিছুই নয়, ডাব্লু 3 স্কুল স্কুল বলে

% ধারণকারী উপাদানটির প্রস্থের শতাংশের মধ্যে প্যাডিং নির্দিষ্ট করে

সুতরাং এটি সবসময় প্রস্থ ব্যবহার করে? আমি কখনই খেয়াল করিনি।

আপনি যা করছেন তা প্রদর্শন: টেবিল (কমপক্ষে আধুনিক ব্রাউজারগুলির জন্য) ব্যবহার করে প্রাপ্ত করা যেতে পারে। কৌশলটি এখানে ব্যাখ্যা করা হয়েছে ।

Comments

ধন্যবাদ স্প্লিফ আমি বুঝতে পারি যে আমার 50% ডিভের বিষয়বস্তুকে কেন্দ্র করবে না। আমার কাছে পাঠ্যের কেবলমাত্র একটি লাইন রয়েছে যা অনুভূমিকভাবে কেন্দ্রিক হওয়া দরকার needs যদিও লিঙ্কটির জন্য অনেক ধন্যবাদ!

— রায়ান

যদি এটির কেবল একটি লাইনের পাঠ্য আপনি হাস্যকর আকারে বড় ব্যবহারের কথা বিবেচনা করেছেন line-height, অর্থাত্, লাইন-উচ্চতা 200px তৈরি করবেন?

— SpliFF

উল্লম্বভাবে পাঠ্য কেন্দ্রীকরণের জন্য রায়ান, স্ট্যাকওভারফ্লো // প্রশ্নগুলি দেখুন / ৮৮65৫৫৫৮/২

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

আপনার লিঙ্কটি ভাঙা হয়েছে

— 59

Answer 8

এটি একটি খুব আকর্ষণীয় বাগ। (আমার মতে এটি যাইহোক একটি বাগ) ভাল লাগবে!

সংক্রান্ত কিভাবে এটি সেট, আমি ক্যামিলো মার্টিন এর উত্তর সুপারিশ করবে। তবে কেন , আপনারা যদি কিছু মনে করেন না তবে আমি এটি কিছুটা ব্যাখ্যা করতে চাই।

---

ইন সিএসএস চশমা আমি পাওয়া গেছে:

'প্যাডিং'
শতাংশ: ব্লকযুক্ত প্রস্থের উল্লেখ করুন

… যা অদ্ভুত, তবে ঠিক আছে।

সুতরাং, একজন পিতা-মাতা width: 210pxএবং একটি সন্তানের সাথে padding-top: 50%আমি একটি গণনা / গণিত মান পাই padding-top: 96.5px- যা প্রত্যাশিত নয় 105px।

এটি কারণ উইন্ডোজ (আমি অন্যান্য ওএস সম্পর্কে নিশ্চিত নই), সাধারণ স্ক্রোলবারগুলির আকার ডিফল্ট 17px × 100%(বা 100% × 17pxঅনুভূমিক বারগুলির জন্য) হয়। ঐ 17pxবাদ দিয়া হয় আগে গণক 50%, অত 50% of 193px = 96.5px।

Comments

অনুমানের

— মানিকান্ত