উল্লম্ব সারিবদ্ধ মাঝখানে <ডিভ>

Question

আমি উচ্চতা রাখতে চান #abc divএ 50pxএবং টেক্সট মাঝখানে উল্লম্বভাবে সারিবদ্ধ div।

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Answer 1

আপনি ব্যবহার করতে পারেন line-height: 50px;, আপনার প্রয়োজন হবে না vertical-align: middle;।

ডেমো

---

উপরে, যদি আপনি একাধিক লাইনের করেছি ব্যর্থ হবে, যাতে যদি আপনি ব্যবহার করে আপনার টেক্সট মোড়ানো পারেন spanব্যবহার তুলনায় এবং display: table-cell;এবং display: table;সহ vertical-align: middle;, এছাড়াও ব্যবহার করতে ভুলবেন না width: 100%;জন্য#abc

ডেমো

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

---

আমি এখানে অন্য সমাধানের কথা ভাবতে পারি তা হল transformসম্পত্তি ব্যবহার করা translateY()যেখানে Yস্পষ্টতই ওয়াই অক্ষের জন্য দাঁড়িয়ে আছে। এটি বেশ সোজা এগিয়ে আছে ... আপনাকে যা করতে হবে উপাদানের অবস্থান সেট করা হয় প্রয়োজন absoluteএবং পরে অবস্থান 50%থেকে topএবং ঋণাত্মক সঙ্গে এটি অক্ষ থেকে অনুবাদ-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

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

ডেমো

মনে রাখবেন যে পুরানো ব্রাউজারগুলিতে এটি সমর্থিত হবে না, উদাহরণস্বরূপ আই 8, তবে আপনি যথাক্রমে আই 9 -ms, -mozএবং ক্রোম এবং ফায়ারফক্সের অন্যান্য পুরানো ব্রাউজার সংস্করণগুলি তৈরি করতে এবং -webkitউপসর্গগুলি তৈরি করতে পারেন ।

উপর আরও তথ্যের জন্য transform, আপনি এখানে উল্লেখ করতে পারেন ।

Comments

আমার সম্পূর্ণ পেশাগত জীবন সম্পর্কে এই সাধারণ লাইন-উচ্চতার সমাধানটি আমার জানা উচিত এবং এখনই এটি শিখেছি। আপনাকে ধন্যবাদ, মিঃ এলিয়েন।

— নাথন বিচ

Answer 2

এটি সহজ: পিতামাতাকে এই দিন:

display: table;

এবং শিশুটিকে এটি দিন:

display: table-cell;
vertical-align: middle;

এটাই!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

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

Comments

এটি খারাপ কারণ এটি হ্যাক হিসাবে টেবিলটি ব্যবহার করছে, এটি বেশিরভাগ ক্ষেত্রেই কাজ করতে পারে তবে আপনি যখন 'টেবিল'-এর প্রস্থ পরিবর্তন করতে চান, তবে এটি সঠিকভাবে কাজ করবে না (যা আমি এখন এই সমস্যার সাথে এই সমস্যাটি নিয়ে আসছি) )

— কেভিন সরল

display:table;এটি কাজ করতে আমার পিতামাতাকে যুক্ত করার দরকার নেই ।

— ভিনসেন্টপেরিন.কম

সম্ভবত এটি হ্যাক ... তবে এটি কাজ করে এবং অন্যান্য সমাধানগুলি কেবল নির্দিষ্ট ক্ষেত্রেই কাজ করে এবং আমাদের ক্ষেত্রে প্রায়শই ব্যবহারযোগ্য হয় না।

— জেরি

এই সমাধানটির সুবিধা: সমস্ত ধরণের সামগ্রীর সাথে কাজ করে (কেবল পাঠ্যের জন্য নয়, কেবল একটি লাইনও নয় ...)

— জেরি

Answer 3

পুরানো প্রশ্ন তবে আজকাল CSS3 উল্লম্ব সারিবদ্ধকরণকে সত্যই সহজ করে তোলে !

কেবলমাত্র #abcনিম্নলিখিত সিএসএসে যুক্ত করুন:

display:flex;
align-items:center;

সাধারণ ডেমো

মূল প্রশ্ন ডেমো আপডেট হয়েছে

সাধারণ উদাহরণ:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Comments

আমি এছাড়াও পরামর্শ দেব: প্রদর্শন: গ্রিড; সারিবদ্ধ আইটেম: কেন্দ্র; যখন আপনার একাধিক অবজেক্ট একসাথে উল্লম্বভাবে সারিবদ্ধ হবে তখন এটি আরও ভাল কাজ করে

— লিওনার্দো ডাগা

কোন ব্রাউজার সমর্থন করে CSS3 ?

— কিকিনেট

@ কিকিনেট, বিশ্বব্যাপী বাজারের 92% ক্যানিউজড ::#search= align

— ড্যানিয়েল কুচাল

Perfekt! সহজ এবং সহজ .. খালি পাত্রে যুক্ত করুন

— উজ্জ্বল সিং

Answer 4

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

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

এখানে সম্পূর্ণ নিবন্ধ পড়ুন ।

Comments

এটি জিনিসগুলিকে অস্পষ্ট করতে পারে কারণ রূপান্তরের ফলস্বরূপ জিনিসগুলি অর্ধ পিক্সেলের স্থানে অবস্থিত হতে পারে।

— কেভিন হুইলার

সেই সমস্যাটিকে লক্ষ্য করে পোস্টটিতে একটি আপডেট রয়েছে। পিতা বা মাতা অন: transform-style: preserve-3d;!

— অ্যান্ড্রি

Answer 5

আপনি লম্বা উচ্চতা ডিভের উচ্চতা হিসাবে বড় ব্যবহার করতে পারেন। তবে আমার কাছে সবচেয়ে ভাল সমাধান হ'ল এটি ->position:relative; top:50%; transform:translate(0,50%);

Answer 6

অ্যাডিং সম্পর্কে কীভাবে line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

উচ্চারণ, লাইন উচ্চতা

বা paddingচালু #abc। প্যাডিং সহ এটি ফলাফল

হালনাগাদ

আপনার সিএসএসে যুক্ত করুন:

#abc img{
   vertical-align: middle;
}

ফলাফল । আশা করি আপনি যা খুঁজছেন

Comments

আমি যেভাবে এটি কাজ করতে চাই তেমনভাবে কাজ করে না, আপনি যখন উচ্চতা বা রেখার উচ্চতা পরিবর্তন করেন তখন কিছু ঠিক হয় না। ইতিমধ্যে একটি উত্তর পেয়েছে, যাইহোক ধন্যবাদ

— সিকেষ্ট ick

Answer 7

এটা চেষ্টা কর:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

ডিভকে কেন্দ্র করার জন্য অন্য একটি পদ্ধতি:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Answer 8

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

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

<div class="text-align-center"> Align center</div>

Comments

দয়া করে এটি ব্যাখ্যা করুন!

— স্যাজাবলস পল

Answer 9

এটির ধারকটিতে আপনার পাঠ্যটিকে উল্লম্বভাবে কেন্দ্র করতে অনুবাদ Y CSS সম্পত্তি ব্যবহার করুন

<style>
.centertext{

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

}
</style>

এবং তারপরে এটি আপনার থাকা ডিআইভিতে প্রয়োগ করুন

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

আপনার প্রয়োজন অনুসারে অনুবাদ Y শতাংশ সামঞ্জস্য করুন। আশাকরি এটা সাহায্য করবে

Answer 10

এই কোডটি উল্লম্ব মধ্যম এবং অনুভূমিক কেন্দ্রের জন্য নির্দিষ্ট নির্দিষ্ট উচ্চতা ছাড়াই প্রান্তিককরণ:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}