font - title html




كيف أقوم بتوسيط النص رأسيًا مع CSS؟ (20)

أود فقط تمديد الإجابة منmichielvoo من أجل إطلاق الحاجة إلى ارتفاع الخط والتنفس من ارتفاع div. هو في الأساس مجرد نسخة مبسطة مثل هذا:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

ملاحظة: هناك حاجة إلى تعليق جزء من css fixed-height لإحاطة div .

لدي عنصر div يحتوي على نص ، وأريد محاذاة محتويات هذا القس عموديًا.

إليكم نمط div الخاص بي:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

ما هي أفضل طريقة للقيام بذلك؟


أينما كنت تريد نمط مركز عمودي يعني أنه يمكنك محاولة display:table-cell vertical-align:middle .

مثال:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


الحل مقبول حيث أن الإجابة مثالية لاستخدام line-height بنفس ارتفاع div ، ولكن هذا الحل لا يعمل بشكل مثالي عند التفاف النص OR في سطرين.

جرب هذا واحد إذا تم التفاف النص أو على عدة أسطر داخل div.

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

لمزيد من المرجع ، انظر:


الطريقة البسيطة والمتنوعة هي (كطريقة طاولة ميشلفيلو):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

يعمل استخدام هذه السمة (أو فئة مكافئة) على علامة رئيسية حتى في حالة محاذاة العديد من الأطفال:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

جرب هذا الحل :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

بنيت باستخدام CSS + .


جرب خاصية التحويل:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


حل بسيط جدًا وأقوى لمحاذاة الحركة الرأسية:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


رأيت الإجابات السابقة ، وسوف تعمل فقط لهذا العرض من الشاشة (لا تستجيب). لاستجابة لديك لاستخدام فليكس ،

مثال

div{ display:flex; align-item:center;}

ضعه ضمن button بدلاً من div إذا كنت لا تهتم بالتأثير البصري الصغير.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


طريق اخر:

لا تُعيِّن سمة height div ، بل تستخدم بدلاً من ذلك padding: لتحقيق التأثير. على نحو مشابه لارتفاع الخط ، لا يعمل إلا إذا كان لديك سطر واحد من النص. على الرغم من هذه الطريقة ، إذا كان لديك المزيد من المحتوى ، فسيظل النص محوريًا ، ولكن سيكون div نفسه أكبر قليلاً.

لذلك بدلاً من الذهاب مع:

div {
  height:120px;
  line-height: 120px;
}

تستطيع أن تقول:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

سيؤدي هذا إلى تعيين padding العلوي والسفلي من div إلى 60px ، padding الأيسر والأيمن إلى الصفر ، مما يجعل div 120px (بالإضافة إلى ارتفاع الخط) مرتفعًا ، ووضع النص عموديًا في div.


كل الفضل يعود لهذا الرابط الرابطSebastian Ekström Link ؛ يرجى الدخول من خلال هذا. نرى ذلك في العمل codepen . من خلال قراءة المادة المذكورة أعلاه أنا أيضا خلق الكمان التجريبي .

مع ثلاثة أسطر فقط من CSS (باستثناء بادئات البائع) ، يمكننا القيام بذلك بمساعدة تحويل: يترجم translateY عموديًا كل ما نريده ، حتى إذا لم نكن نعرف ارتفاعه.

يتم استخدام تحويل خاصية CSS عادةً لعناصر التدوير والقياس ، ولكن باستخدام دالة translateY الخاصة بنا يمكننا الآن محاذاة العناصر رأسياً. عادةً ما يجب القيام بذلك من خلال تحديد موضع مطلق أو إعداد ارتفاعات خطية ، ولكن هذه تتطلب منك معرفة ارتفاع العنصر أو تعمل فقط على نص أحادي السطر ، إلخ.

لذلك ، نكتب هذا:

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

هذا كل ما تحتاجه. إنه أسلوب مماثل لطريقة الوضع المطلق ، ولكن مع الاتجاه الصعودي لا يتعين علينا تحديد أي ارتفاع على العنصر أو موضع الملكية على الأصل. يعمل مباشرة من خارج الصندوق ، حتى في Internet Explorer 9 !

لجعل الأمر أكثر بساطة ، يمكننا أن نكتبه على هيئة mixin مع بادئات البائع الخاصة به.


كمرجع ولإضافة إجابة أبسط:

CSS خالص:

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

أو كمزيج SASS / SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

يستخدم بواسطة:

.class-to-center {
    @include vertical-align;
}

بواسطة مدونة Sebastian Ekström محاذاة رأسية أي شيء مع 3 أسطر فقط من CSS :

يمكن أن تتسبب هذه الطريقة في أن تكون العناصر غير واضحة بسبب العنصر الذي يتم وضعه على "نصف بكسل". الحل لهذا هو تعيين العنصر الأصلي الخاص به إلى preserve-3d. مثل ما يلي:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

نحن نعيش في 2015 + ويدعم فليكس بوكس ​​من قبل كل متصفح حديث كبير.

ستكون الطريقة التي يتم بها إنشاء مواقع الويب من الآن فصاعدًا.

تعلمه!


لست متأكدًا من أن أي شخص قد ذهب إلى مسار writing-mode ، ولكنني أعتقد أنه يحل المشكلة بطريقة نظيفة ولديه دعم واسع :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

سيعمل هذا بالطبع مع أي أبعاد تحتاج إليها (إلى جانب 100٪ من الشركة الأم). إذا قمت بإزالة خطوط الحدود ، فسيكون من المفيد التعرف عليك.

JSFiddle تجريبي لك لعزف .

دعم Caniuse : 85.22٪ + 6.26٪ = 91.48٪ (حتى IE في!)


للحصول على سطر واحد من النص (أو حرف واحد) ، يمكنك استخدام هذه التقنية:

يمكن استخدامه عندما يكون #box به #box غير ثابت ، نسبياً في٪ .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

شاهد العرض المباشر في JsBin (أسهل لتحرير CSS) أو JsFiddle (أسهل لتغيير ارتفاع إطار النتائج).

إذا كنت تريد وضع نص داخلي بتنسيق HTML ، وليس في CSS ، فأنت بحاجة إلى التفاف محتوى النص في عنصر إضافي مضمّن وتحرير #box::after لمطابقته. (وبالطبع ، content: يجب إزالة الملكية.)
فمثلا،
<div id="box"><span>TextContent</span></div>
في هذه الحالة ، يجب استبدال #box::after بـ #box span .

للحصول على دعم IE8 ، يجب استبدال :: with ::


يمكنك أيضا استخدام الخصائص أدناه.

display: flex; 
align-content: center; 
justify-content : center;

يمكنك استخدام مقتطف الشفرة التالي كمرجع. انها تعمل مثل سحر بالنسبة لي:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>
        <body style="background:#3cedd5">
        <div class="centered-text">
          <h1>Yes It's My landing Page</h1>
    	  <h2>Under Construction, Coming Soon !!!</h2>
        </div>
        </body>
    </html>

يكون ناتج مقتطف الشفرة الموضح أعلاه كما يلي:

مصدر رمز المصدر: codepuran.com/web-designing/… codepuran.com/web-designing/…


يمكنك تجربة هذا النهج الأساسي:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

إنه يعمل فقط مع سطر مفرد من النص ، لأننا نضبط ارتفاع الخط إلى نفس ارتفاع عنصر المربع المحتوي.

نهج أكثر تنوعا

هذه طريقة أخرى لمحاذاة النص رأسيًا. سيعمل هذا الحل على سطر واحد وخطوط متعددة من النص ، ولكنه لا يزال يتطلب حاوية ذات ارتفاع ثابت:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

يقوم CSS فقط بحساب <div> ، محاذاة مركزية بشكل عمودي <span> بتعيين <span> خط <div> مساوياً لارتفاعه ، ويجعل <span> كتلة مضمنة مع vertical-align: middle . ثم يقوم بضبط ارتفاع الخط إلى الوضع العادي لـ <span> ، بحيث تتدفق محتوياته بشكل طبيعي داخل الكتلة.

محاكاة عرض الجدول

وهنا خيار آخر ، قد لا يعمل على المتصفحات القديمة التي لا تدعم display: table display: table-cell (أساسًا Internet Explorer 7). باستخدام CSS نقوم بمحاكاة سلوك الجدول (بما أن الجداول تدعم المحاذاة العمودية) ، و HTML هو نفس المثال الثاني:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

باستخدام المواقع المطلقة

تستخدم هذه التقنية عنصرًا موضعيًا تمامًا يضبط أعلى وأسفل ويسار ويمينًا إلى 0. ويتم وصفه بمزيد من التفاصيل في مقالة في مجلة Smashing ، Absolute Horizontal و Vertical Centering In CSS .


لجميع احتياجاتك المحاذاة العمودية!

أعلن هذا Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ثم أدرجها في عنصرك:

.element{
    @include vertical-align();
}

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>


<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>




vertical-alignment