একটি ডিভের মধ্যে পরিবর্তনশীল উচ্চতা সহ উল্লম্বভাবে কেন্দ্রীভূত করবেন?

Question

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

Comments

সেই নিবন্ধের পদ্ধতিটি সাফারি (4.0.5) এ বিচ্ছিন্ন হয়: এস

@ রিপার 234 ঠিক যেমনটি নয়, কারণ এই প্রশ্নটি পরিবর্তনশীল উচ্চতা

— দ্বি

এছাড়াও, এই প্রশ্নটি আগে জিজ্ঞাসা করা হয়েছিল।

— গুই ইমামুরা

সমস্ত ব্রাউজারের জন্য উল্লম্বভাবে একটি ডিভিড কেনার

— স্যান্ডি জোশি

Answer 1

শুধু যোগ কর

position: relative;
top: 50%;
transform: translateY(-50%);

ভিতরের ডিভ।

এটি যা করে তা অভ্যন্তরীণ ডিভের শীর্ষ সীমানাটি বাইরের ডিভের অর্ধেক উচ্চতা ( top: 50%;) এর দিকে নিয়ে যাচ্ছে এবং তারপরে অভ্যন্তরীণ ডিভটি এর অর্ধেক উচ্চতা ( transform: translateY(-50%)) দ্বারা আপ করবে । এটি সাথে কাজ করবে position: absoluteবা relative।

খেয়াল রাখতে হবে যে transformএবং translateবিক্রেতা উপসর্গ যা অনুবাদকে সরলীকরণের জন্য অন্তর্ভুক্ত করা হয় না আছে।

কোডপেন: http://codepen.io/anon/pen/ZYprdb

Comments

এইটি কেন ক্রোম এবং ফায়ারফক্সে কাজ করে তা কেবল ভেবে দেখেছিল, তবে সাফারির পক্ষে নয়। তারপরে আমি লক্ষ্য করেছি যে সর্বাধিক transformসম্পর্কিত -webkit-স্টাফগুলি পূর্বনির্ধারিত এবং এখন এটি কার্যকর হয়। তাই কেবল একটি অনুস্মারক হিসাবে: -webkit-উপসর্গটিও যুক্ত করতে ভুলবেন না।

— মিহো

আপনার উপসর্গগুলি পরিচালনা করতে github.com/postcss/autoprefixer এর মতো একটি সরঞ্জাম ব্যবহার করুন ।

— জেমি চং

এই উত্তরটি শীর্ষে থাকা উচিত।

— জোসে ফাতি

এটির আরও অনেকগুলি উর্ধ্বতন হওয়া উচিত! যাইহোক, এটি সঙ্গে কাজ করে position: absolute, তাই না?

— কাবি

এই পদ্ধতির ক্রোমে দুর্ভাগ্যজনক পার্শ্ব প্রতিক্রিয়া রয়েছে - যদি আপনার translateমোড়কটির মধ্যে একটি বিজোড় সংখ্যক পিক্সেল থাকে তবে এটি সবকিছুকে 5px উচ্চতা হ্যান্ডেল করার চেষ্টা করার সাথে ঝাপসা করে সমস্ত কিছু রেন্ডার করে দেবে।

— কিথ

Answer 2

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

এটির জন্য কোনও অতিরিক্ত মার্কআপের প্রয়োজন নেই এবং এটি খুব ভালভাবে কাজ করছে বলে মনে হচ্ছে। আমি display: tableপদ্ধতিটি ব্যবহার করতে পারিনি কারণ tableউপাদানগুলি max-heightসম্পত্তি মান্য করে না ।

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Comments

এখন -এটি হ'ল একটি সমাধান-সমাধান। এই পোস্ট করার জন্য অনেক ধন্যবাদ!

— ট্রয় অ্যালফোর্ড

অন্য উত্তরের মতো, এটির থেকে আরও ভাল হতে যদি এটি লিঙ্ক থেকে পদ্ধতির এবং কোডটি অন্তর্ভুক্ত করে।

— ক্যাটিকে

+1, এই সমাধানটি আসলেই বেশ দক্ষ! বিটিডব্লিউ আপনি .block { white-space: nowrap; font-size: 0; line-height: 0; }সিউডো উপাদানটিতে নেতিবাচক ডান মার্জিনটি যুক্ত করতে এবং ছেড়ে দিতে পারেন , আপনাকে কেবল fs পুনরায় সেট করতে হবে এবং কেন্দ্রের উপর ... এইচটিএমএর মতো আপনি নিশ্চিত করেছেন যে উপাদানটি ভিউপোর্টের চেয়ে আরও প্রশস্ত হলেও সঠিকভাবে অবস্থান করবে (এবং ডোন ইমোটি কিছুটা অগোছালো নেতিবাচক মার্জিন ব্যবহার করতে হবে না)।

— সাইমন

: - @jessegavin আপনার মতামত ... কিভাবে নিম্নলিখিত স্ট্যাক আপ পদ্ধতির আপনি রূপরেখা থাকেন বিরুদ্ধে করে stackoverflow.com/questions/396145/...

— pulkitsinghal

এছাড়াও, বাইরের ধারক। ব্লকটির উচ্চতার পরিবর্তে ন্যূনতম-উচ্চতা থাকে যখন এটি ভেঙে যায়।

— লিংকন বি

Answer 3

এটি এমন কিছু যা আমার অনেকবার করা দরকার এবং একটি সামঞ্জস্যপূর্ণ সমাধানের জন্য আপনাকে কিছুটা অ-শব্দার্থিক মার্কআপ এবং কিছু ব্রাউজার নির্দিষ্ট হ্যাক যুক্ত করতে হবে। যখন আমরা সিএসএস 3 এর জন্য ব্রাউজার সমর্থন পাই আপনি পাপ না করে আপনার উল্লম্ব কেন্দ্রিকতা পাবেন।

কৌশলটির আরও ভাল ব্যাখ্যার জন্য আপনি যে নিবন্ধটি আমি এটিকে অভিযোজিত তা দেখতে পারেন তবে মূলত এটিতে অতিরিক্ত উপাদান যুক্ত করা এবং আইই এবং ব্রাউজারগুলিতে position:table\table-cellনন-টেবিল উপাদানগুলিতে সমর্থন করে এমন বিভিন্ন স্টাইল প্রয়োগ করা জড়িত ।

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

ব্রাউজারগুলির নির্দিষ্ট সেটগুলিতে শৈলী প্রয়োগ করার অনেকগুলি উপায় (হ্যাক) রয়েছে। আমি শর্তযুক্ত মন্তব্য ব্যবহার করেছি তবে অন্য দুটি কৌশল দেখার জন্য উপরে লিঙ্কিত নিবন্ধটি দেখুন।

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

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

Comments

হ্যাঁ, আমি আজ সেই নিবন্ধটি পেয়েছি এবং এটি আমার বিশেষ পরিস্থিতির জন্য কার্যকর করতে সক্ষম হয়নি। সম্ভবত আমার আরও খতিয়ে দেখা উচিত।

— jessegavin

সম্ভবত আপনি যে কোডটি ব্যবহার করছেন সেটি কাজ করে না তা পোস্ট করতে পারেন?

— ক্রিস মারাস্তি-জর্জি

এটি কি এখনও এই সমস্যার সর্বোত্তম সমাধান?

— ripper234

এই নিবন্ধটি Chrome 23, ফায়ারফক্স 16 এবং IE 9 তে কাজ করছে বলে মনে হচ্ছে না এই উত্তরটি আরও ভাল সমাধান বলে মনে হচ্ছে।

— ফার্নান্দো কোরিয়া

না, সেই নিবন্ধটি এখনও ফেব্রুয়ারী 24, 2013

— ওএমএ

Answer 4

শিশু নির্বাচনকারীকে ব্যবহার করে, আমি উপরে ফাদির অবিশ্বাস্য উত্তর নিয়েছি এবং এটি প্রয়োগ করতে পারি কেবলমাত্র একটি সিএসএস নিয়মে সেদ্ধ করেছি। এখন আমাকে যা করতে হবে তা হ'ল contentCenteredআমি যে উপাদানগুলিকে কেন্দ্র করতে চাইছি তাদের ক্লাসের নাম যুক্ত করুন :

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

ফোর্কযুক্ত কোডপেন: http://codepen.io/dougli/pen/Eeysg

Comments

কুল। ভাগ করে নেওয়ার জন্য ধন্যবাদ. সাবধানতার একটি দ্রষ্টব্য হ'ল *নির্বাচক গৃহীত উত্তরের চেয়েও খারাপ সম্পাদন করতে চলেছেন। একটি সমস্যা হতে পারে না, তবে লক্ষণীয়। stevesouders.com/blog/2009/06/18/simplifying-css-selectors

— jessegavin

ধন্যবাদ। হ্যাঁ, এটি সম্ভবত আরও খারাপ সম্পাদন করবে, তবে আজকাল সিএসএসের নিয়মগুলি সম্ভবত জিনিসগুলিকে খুব বেশি প্রভাবিত করে না। > divপরিবর্তে নির্বাচন করে আমরা সম্ভবত এটি উন্নতি করতে পারি । calendar.perfplanet.com/2011/...

— dougli

সহজ এবং দুর্দান্ত। আমার জন্য পুরোপুরি কাজ করে।

— Lovro

Answer 5

আমার পক্ষে এ পর্যন্ত সেরা ফলাফল:

কেন্দ্রকে কেন্দ্র করে ভাগ করা:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Comments

— মোহন

Answer 6

আপনি মার্জিন অটো ব্যবহার করতে পারেন। ফ্লেক্স সহ, ডিভটি অনুভূমিকভাবেও কেন্দ্রিক বলে মনে হচ্ছে।

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Comments

প্রদর্শন: ফ্লেক্স এখনও কার্যত একটি পরীক্ষামূলক বৈশিষ্ট্য; কোনও ব্রাউজার এখনও এটি সঠিকভাবে সমর্থন করে না

— andreszs

Answer 7

আমার পক্ষে এটি করার সর্বোত্তম উপায় হ'ল:

.container{
  position: relative;
}

.element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

সুবিধাটি উচ্চতাটিকে সুস্পষ্ট করতে হবে না

Answer 8

divডায়নামিক (শতাংশযুক্ত) উচ্চতা সহ এটির জন্য এটি আমার দুর্দান্ত সমাধান ।

সিএসএস

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

এইচটিএমএল

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

এটি নিজের দ্বারা চেষ্টা করুন।

Answer 9

আপনি নিম্নোক্ত কোডের মতো ফ্লেক্স ডিসপ্লে ব্যবহার করতে পারেন:

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>