توسيط - ضبط النص css




كيف يتم توسيط div بشكل عمودي لجميع المتصفحات؟ (20)

توسيط فقط عموديا

إذا كنت لا تهتم بالمتصفح Internet Explorer 6 و 7 ، فيمكنك استخدام تقنية تتضمن حاويتين.

الحاوية الخارجية:

  • يجب أن يكون display: table;

الحاوية الداخلية:

  • يجب أن يكون display: table-cell;
  • يجب أن يكون vertical-align: middle;

مربع المحتوى:

  • يجب أن يكون display: inline-block;

يمكنك إضافة أي محتوى تريده إلى مربع المحتوى دون الاهتمام بعرضه أو ارتفاعه!

عرض:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

انظر أيضا هذا عزف !

توسيط أفقي ورأسي

إذا كنت تريد التوسيط الأفقي والرأسي ، فستحتاج أيضًا إلى ما يلي.

الحاوية الداخلية:

  • يجب أن يكون text-align: center;

مربع المحتوى:

  • يجب إعادة ضبط محاذاة النص الأفقي على سبيل المثال text-align: left; أو text-align: right; ، ما لم ترغب في توسيط النص

عرض:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

انظر أيضا هذا عزف !

أريد توسيط div عموديًا مع CSS. لا أريد جداول أو جافا سكريبت ، لكن فقط CSS خالص. لقد وجدت بعض الحلول ، لكنهم جميعا يفتقدون دعم Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

كيف يمكنني توسيط div عمودي في كافة المستعرضات الرئيسية ، بما في ذلك Internet Explorer 6؟


حل Flexbox

ملاحظات
1. يعطى العنصر الرئيسي اسم الفئة.
2. أضف بادئات البائع المرن إذا كانت مطلوبة من المستعرضات المعتمدة .

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


أعرف أن الإجابات قد تم تقديمها بالفعل ، ولكن أعتقد أن هذا الرابط يمكن أن يكون مفيدًا للمحاذاة المركزية في جميع الحالات: howtocenterincss.com


أكثر لا أستطيع رؤيته في القائمة:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • عبر المتصفح (بما في ذلك Internet Explorer 8 - Internet Explorer 10 بدون اختراق!)
  • متجاوبة مع النسب المئوية و min- / max-
  • توسيط بغض النظر عن الحشو (بدون مربع التحجيم!)
  • يجب التصريح عن الارتفاع (انظر الارتفاع المتغير )
  • ضبط الإعداد الموصى به overflow: auto لمنع انتشار المحتوى (راجع تجاوز السعة)

المصدر: المطلق الأفقي والرأسي التمركز في المغلق



إذا كان هناك من يهتم ببرنامج Internet Explorer 10 (والإصدارات الأحدث) فقط ، استخدم flexbox :

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

دعم Flexbox: http://caniuse.com/flexbox


الجواب من Billbad يعمل فقط مع عرض ثابت من div .inner . يعمل هذا الحل لعرض ديناميكي عن طريق إضافة text-align: center السمة text-align: center إلى the .outer div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>


الحل الأسهل هو أدناه:

.outer-div{
  width: 100%;
  height: 100%;
  display: flex;
}
.inner-div{
  margin: auto;
}

انا استعمل هذا. يعمل في Internet Explorer 8 والإصدارات الأحدث:

height:268px - display:table يعمل display:table مثل الحد الأدنى للارتفاع.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

بعد الكثير من البحث وجدت أخيرا الحل النهائي. يعمل حتى بالنسبة للعناصر الطافية. أنظر المصدر

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

تعمل ثلاثة أسطر من الكود باستخدام transform عمليًا على المتصفحات الحديثة و Internet Explorer:

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

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

  1. 'موضع' نسبياً يعبث بالتصميم إذا كان div الحالي في الجسم وليس له div الحاوية. ومع ذلك ، يبدو أن كلمة "ثابت" تعمل ، ولكن من الواضح أنها تعمل على إصلاح المحتوى في وسط منفذ العرض

  2. كما استخدمت هذا التصميم لتوسيط بعض الأقسام المتراكبة ووجدت في موزيلا أن جميع العناصر داخل div المتحولة قد فقدت حدودها السفلية. ربما مشكلة التقديم. ولكن إضافة الحد الأدنى من الحشو إلى بعضها جعلها صحيحة. تقديم Chrome و Internet Explorer (بشكل مثير للدهشة) المربعات دون أي حاجة للحشو


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

تم اختباره في Chrome و Firefox و Opera و Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>


في الواقع ، تحتاج إلى قسمين للتمركز الرأسي. يجب أن يكون العرض الذي يحتوي على المحتوى بعرض وارتفاع.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

وهنا result


في ما يلي أفضل حل شامل يمكن أن أقوم بإعداده لمربع المحتوى المرتفع ذي العرض الثابت والمرئي عموديًا وأفقيًا. تم اختباره والعمل على الإصدارات الحديثة من Firefox و Opera و Chrome و Safari.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

عرض مثال العمل مع المحتوى الديناميكي

بنيت في بعض المحتوى الديناميكي لاختبار المرونة وأحب أن أعرف ما إذا كان أي شخص يرى أي مشاكل في ذلك. يجب أن تعمل بشكل جيد مع التراكبات المركزة أيضًا - العلبة الخفيفة ، النافذة المنبثقة ، وما إلى ذلك.


لتوسيط div على الصفحة ، تحقق من الرابط كمانع .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

خيار آخر هو استخدام مربع المرن ، والتحقق من الارتباط كمان .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

خيار آخر هو استخدام تحويل CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>


للأسف - ولكن ليس من المستغرب - أن الحل أكثر تعقيدًا مما يرغب المرء في أن يكون. وللأسف أيضًا ، ستحتاج إلى استخدام أقسام إضافية حول div تريد توسيط رأسيًا.

بالنسبة إلى المتصفحات المتوافقة مع المعايير مثل Mozilla و Opera و Safari وما إلى ذلك ، يلزمك تعيين div الخارجي لعرضه كجدول وعرض div الداخلي كخلية جدول - والتي يمكن بعد ذلك أن تتم توسيطها رأسيًا. بالنسبة إلى Internet Explorer ، يجب وضع div الداخلي تمامًا داخل div الخارجي ثم تحديد الجزء العلوي كـ 50٪ . توضح الصفحات التالية هذه التقنية بشكل جيد وتوفر بعض نماذج التعليمات البرمجية أيضًا:

هناك أيضًا تقنية للقيام بالتوسيط الرأسي باستخدام JavaScript. محاذاة رأسية للمحتوى مع JavaScript و CSS يوضح ذلك.


هذا الحل يعمل لي إذا كان لديك عنصر كتلة (على سبيل المثال). لقد استخدمت الألوان لجعل الحل أكثر وضوحًا.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle Code Demo


هذا هو المكان الذي أذهب إليه دائمًا عندما يتعين علي العودة إلى هذه المسألة .

لأولئك الذين لا يريدون القيام بالقفز:

  1. حدد الحاوية الرئيسية كموضع position:relative أو position:absolute .
  2. حدد ارتفاع ثابت على حاوية الطفل.
  3. تعيين position:absolute top:50% على حاوية الطفل لنقل الجزء العلوي لأسفل إلى منتصف الأصل.
  4. تعيين أعلى الهامش: -yy حيث yy هو نصف ارتفاع الحاوية الفرعية لتعويض العنصر للأعلى.

مثال على ذلك في الكود:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

يقدم الرابط التالي طريقة بسيطة لعمل ذلك باستخدام 3 أسطر فقط في CSS:

محاذاة عمودية أي شيء مع 3 أسطر فقط من CSS .

قروض ل : سيباستيان اكستروم .

أعلم أن السؤال له بالفعل إجابة ، لكنني رأيت فائدة في الرابط لبساطته.


يمكن توسيط المحتويات بسهولة باستخدام flexbox. يعرض التعليمة البرمجية التالية CSS للحاوية التي يجب أن تتمحور المحتويات داخلها:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}




vertical-alignment