html - আমি কিভাবে একটি div উল্লম্বভাবে টেক্সট সারিবদ্ধ করবেন?




css vertical-alignment (19)

আপডেট - এখানে একটি মহান সম্পদ

http://howtocenterincss.com/

সিএসএস কেন্দ্রে গাধা একটি ব্যথা হয়। বিভিন্ন কারণের উপর নির্ভর করে এটি করার একটি দুর্দান্ত উপায় বলে মনে হয়। এটি তাদের সংহত করে এবং আপনাকে প্রতিটি পরিস্থিতির জন্য প্রয়োজনীয় কোড দেয়।

আপডেট - Flexbox ব্যবহার করে

সর্বশেষ প্রযুক্তির সাথে এই পোস্টটি আপ টু ডেট রাখার সাথে ইনলাইন, এখানে flexbox ব্যবহার করে কিছু কেন্দ্রীভূত করার একটি সহজ উপায়। Flexbox IE9 and lower সমর্থিত নয়।

এখানে কিছু দুর্দান্ত সম্পদ রয়েছে:

ব্রাউজার উপসর্গ সঙ্গে jsfiddle

এইচটিএমএল

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

সিএসএস

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

আপডেট - আরেকটি সমাধান

এই zerosixthree থেকে এবং আপনি CSS এর 6 লাইন সহ কিছু কেন্দ্র করতে দেয়

এই পদ্ধতি IE8 and lower সমর্থিত নয়

jsfiddle

এইচটিএমএল

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

সিএসএস

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

পূর্ববর্তী উত্তর

সহজ এবং লিংক ব্রাউজার পদ্ধতি, চিহ্নিত উত্তর লিঙ্ক হিসাবে দরকারী সামান্য পুরানো হয়।

কিভাবে জাভাস্ক্রিপ্ট বা CSS লাইন উচ্চতা ছাড়াই উল্লম্বভাবে এবং অনুভূমিকভাবে একটি unordered তালিকা এবং একটি div উভয় টেক্সট টেক্সট । আপনার কোনও পাঠ্যের কোনও নির্দিষ্ট তালিকা বা ডিভিগুলিতে কোনও বিশেষ ক্লাস প্রয়োগ করতে হবে না (কোডটি প্রতিটির জন্য একই)। এটি IE9, IE8, IE7, IE6, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ সকল প্রধান ব্রাউজারে কাজ করে। আধুনিক ব্রাউজারগুলি যা তাদের CSS সীমাবদ্ধতার কারণে তাদেরকে সাহায্য করার জন্য 2 বিশেষ স্টাইলশীট (IE7 এর জন্য 1 এবং IE6 এর জন্য অন্যটি) রয়েছে।

অ্যান্ডি হাওয়ার্ড - কিভাবে একটি আনুষ্ঠানিক তালিকা বা ডিভ মধ্যে টেক্সট উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র

সম্পাদন: আমি যে কাজটি শেষ করেছি তার জন্য আমি 7/6 এর জন্য অনেক বেশি যত্ন নিই না, আমি একটু সামান্য সংস্করণ ব্যবহার করেছিলাম (অর্থাত এটি আই 7 এবং 6 এ কাজ করে এমন স্টাফকে সরানো হয়েছে)। অন্য কারো জন্য দরকারী হতে পারে ...

jsfiddle

এইচটিএমএল

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

এবং সিএসএস:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

আমি একটি div সঙ্গে টেক্সট সারিবদ্ধ সবচেয়ে কার্যকর উপায় খুঁজে বের করার চেষ্টা করছি। আমি কিছু জিনিস চেষ্টা করেছি এবং কেউ কাজ বলে মনে হচ্ছে না।

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


CSS এ calc() ব্যবহার করে div প্যাটার্নে calc() আরেকটি ভিন্নতা রয়েছে।

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

এই কাজ করে, কারণ:

  • position:absolute একটি div মধ্যে div সুনির্দিষ্ট বসানো জন্য position:absolute
  • আমরা ভিতরের div উচ্চতা জানি কারণ আমরা এটি 20px সেট।
  • calc(50% - 10px) - ভেতরের div কেন্দ্রের জন্য অর্ধেক উচ্চতা

অ্যাডাম টম্যাটের উত্তর অনুসারে, ডিভিতে পাঠ্য সংমিশ্রণ করার জন্য একটি জেএসফিল্ড example তৈরি করা হয়েছিল

<div class="cells-block">    
    text<br/>in the block   
</div>

ব্যবহার প্রদর্শন দ্বারা : সিএসএস মধ্যে flex

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text's lines */
}

blog আরেকটি example এবং কয়েকটি ব্যাখ্যা দিয়ে।


আপনাকে line-height বৈশিষ্ট্য যুক্ত করতে হবে এবং বৈশিষ্ট্যটি div উচ্চতার সাথে মেলে। আপনার ক্ষেত্রে:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

আসলে, আপনি সম্ভবত height গুণাবলী সম্পূর্ণরূপে মুছে ফেলতে পারে।

এই শুধুমাত্র টেক্সট এক লাইন জন্য কাজ করে, তাই সাবধানে।


আপনি প্রদর্শনটি টেবিল-সেলে প্রদর্শন করে এবং উল্লম্ব-সারিবদ্ধ প্রয়োগ করতে পারেন: মধ্যম;

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

তবে অনুমতি ছাড়াই এটি http://www.w3schools.com/cssref/pr_class_display.asp থেকে অনুলিপি করা এই অনুচ্ছেদ অনুসারে ইন্টারনেট এক্সপ্লোরারের সমস্ত সংস্করণগুলির দ্বারা সমর্থিত নয়।

নোট: মানগুলি "ইনলাইন-টেবিল", "টেবিল", "টেবিল-ক্যাপশন", "টেবিল-সেল", "টেবিল-কলাম", "টেবিল-কলাম-গ্রুপ", "টেবিল-সারি", "টেবিল-সারি" -গ্রুপ ", এবং" উত্তরাধিকারী "আই 7 এবং এর আগে সমর্থিত নয়। IE8 একটি প্রয়োজন! DOCTYPE। IE9 মান সমর্থন করে।

নিচের টেবিলটি http://www.w3schools.com/cssref/pr_class_display.asp থেকে অনুমোদিত প্রদর্শন মানগুলিও দেখায়। আশা করি এটা কাজে লাগবে


আমি সহজে উল্লম্ব কেন্দ্র র্যান্ডম উপাদান নিম্নলিখিত ব্যবহার করুন:

এইচটিএমএল:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

সিএসএস:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

এটি আমার div পাঠ্যকে 200 পিএক্স-উচ্চ বাইরের ডিভিটির সঠিক উলম্ব মধ্যমতে কেন্দ্র করে। আপনার ব্রাউজারের জন্য এই কাজটি করার জন্য আপনাকে ব্রাউজারের উপসর্গটি ব্যবহার করতে হবে (যেমন- -webkit- আমার ক্ষেত্রে)।

এটি শুধুমাত্র পাঠ্যের জন্য নয়, অন্যান্য উপাদানের জন্যও কাজ করে।


এই হিসাবে, ডক্স থেকে :

উল্লম্ব-সারিবদ্ধ CSS সম্পত্তি একটি ইনলাইন বা টেবিল-সেল বক্সের উল্লম্ব সারিবদ্ধকরণ নির্দিষ্ট করে।

#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}

একটি একক উত্তর আমাকে সাহায্য করেনি, এটি চেষ্টা করুন, পিতা-মাতা div যোগ করুন:

display:flex;
align-items:center;

এখানে একটি সমাধান যা পাঠ্যের একক লাইনের জন্য সর্বোত্তম কাজ করে।

লাইন সংখ্যা পরিচিত হলে এটি কিছু tweaking সঙ্গে মাল্টি রেখাযুক্ত টেক্সট জন্য কাজ করতে পারেন

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

এখানে একটি JSFiddle হয়


এটা display: flex সঙ্গে সহজ display: flex । নিম্নোক্ত পদ্ধতির সাথে, div এ পাঠ্যটি উল্লম্ব কেন্দ্রস্থলযুক্ত হবে:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

এবং যদি আপনি চান, অনুভূমিক:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

আপনি আপনার প্রয়োজন ব্রাউজার সংস্করণ দেখতে হবে; পুরানো সংস্করণে কোড কাজ করে না।


টেবিল / টেবিল-সেল ব্যবহার না করেই সামগ্রীটিকে উল্লম্বভাবে সারিবদ্ধ করার একটি সহজ উপায়:

http://jsfiddle.net/bBW5w/1/

এতে আমি একটি অদৃশ্য (প্রস্থ = 0) div যোগ করেছি যা ধারকের সমগ্র উচ্চতা অনুমান করে।

এটা IE এবং FF (সর্বশেষ সংস্করণ) কাজ করে বলে মনে হচ্ছে, অন্যান্য ব্রাউজারের সাথে চেক করে নি

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

এবং অবশ্যই সিএসএস:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

ঠিকভাবে কাজ করে

এইচটিএমএল

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

ছবির ট্যাগ ছাড়া <mat-icon> (যা একটি ফন্ট)


মান বুদ্ধিমান একটি উপাদান সহজ সমাধান

এইচটিএমএল

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

সিএসএস

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

যদি আপনি min-height সম্পত্তির সাথে ব্যবহার করতে চান তবে আপনাকে অবশ্যই এই CSSটি যুক্ত করতে হবে:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

সিএসএস:

.vertical {
   display: table-caption;
}

এই ক্লাসটি এমন উপাদানটিতে যুক্ত করুন যা আপনি উল্লম্বভাবে সারিবদ্ধ করতে চান


হুম, এই সমাধানের জন্য বেশ কয়েকটি উপায় আছে।

কিন্তু আমার কাছে একটি <div> যা একেবারে, height:100% (আসলে, top:0;bottom:0 এবং স্থায়ী প্রস্থ) এবং display:table-cell উল্লম্বভাবে উল্লম্বভাবে কেন্দ্রটিকে কেন্দ্র করতে কাজ করে না। আমার সমাধানটির অভ্যন্তরীণ স্প্যান উপাদানটি প্রয়োজন ছিল, তবে আমি অন্যান্য সমাধানগুলিও দেখেছি, তাই আমি এটি যোগ করতে পারি:

আমার ধারক একটি। .label এবং আমি উল্লম্বভাবে এটি কেন্দ্রিক সংখ্যা চান। আমি একেবারে top:50% অবস্থান করে এটি করেছি top:50% এবং সেটিং line-height:0

<div class="label"><span>1.</span></div>

এবং সিএসএস নিম্নরূপ:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

এটি ক্রিয়া দেখুন: http://jsfiddle.net/jcward/7gMLx/


এইচটিএমএল

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

সিএসএস

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

সিএসএস উল্লম্ব কেন্দ্র
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

নিবন্ধ সারসংক্ষেপ:

CSS2 ব্রাউজারের জন্য একটি display:table করতে পারে display:table / display:table-cell কেন্দ্রের বিষয়বস্তুতে।

JSFiddle এ নমুনা পাওয়া যায়:

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

পুরানো ব্রাউজারের জন্য হ্যাকগুলি একত্রিত করা সম্ভব (IE6 / 7) # নতুন ব্রাউজার থেকে শৈলীগুলি লুকাতে ব্যবহার করে শৈলীগুলিতে:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>




vertical-alignment