html - vertically - vertical align div css




كيف تركز أفقيا<div>؟ (20)

كيف يمكنني توسيط أفقي <div> داخل <div> باستخدام CSS؟

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

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

في تجربتي ، فإن أفضل طريقة لتوسيط مربع أفقيًا هي تطبيق الخصائص التالية:

الحاوية:

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

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

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

عرض:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

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

توسيط سواء أفقيًا وعموديًا

من واقع خبرتي ، فإن أفضل طريقة لتوسيط صندوق سواء عموديًا أو أفقيًا هو استخدام حاوية إضافية وتطبيق الخصائص التالية:

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

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

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

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

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

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

عرض:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.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">
      Center this!
    </div>
  </div>
</div>

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


محاذاة النص: المركز

تطبيق text-align: center محتويات المضمنة داخل مربع الخط. لكن بما أن div الداخلي يحتوي على width: 100% افتراضي width: 100% يجب عليك تحديد عرض معين أو استخدام أحد ما يلي:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

الهامش: 0 تلقائي

استخدام margin: 0 auto هو خيار آخر وهو أكثر ملاءمة للتوافق مع المتصفحات القديمة. يعمل جنبا إلى جنب مع display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

حول flexbox

display: flex تتصرف المرنب كعنصر كتلة وتضع محتواه وفقًا لنموذج flexbox. وهي تعمل مع justify-content: center .

يرجى ملاحظة: Flexbox متوافق مع معظم المتصفحات ولكن ليس كلها. انظر here للحصول على قائمة كاملة ومحدثة لتوافق المتصفحات.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

تحول

transform: translate يتيح لك تعديل مساحة الإحداثيات لنموذج التنسيق المرئي لـ CSS. وباستخدامه ، يمكن ترجمة العناصر وتدويرها وتغيير حجمها وتحريفها. لتتمركز أفقياً ، تحتاج إلى position: absolute left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (موقوف)

العلامة <center> هي بديل HTML text-align: center . وهو يعمل على المتصفحات القديمة ومعظم المستعرضات الجديدة ولكنه لا يعتبر ممارسة جيدة لأن هذه الميزة obsolete وقد تمت إزالتها من معايير الويب.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>


أدرك أنني متأخر جدًا عن اللعبة ، لكن هذا سؤال شائع جدًا ، وقد وجدت مؤخرًا مقاربة لم أراها مذكورة في أي مكان هنا ، لذا أحسست أنني سأوثقها.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

تعديل: يجب أن يكون كلا العنصرين بنفس العرض ليعمل بشكل صحيح.


أسهل طريقة:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


إذا كنت لا ترغب في ضبط عرض ثابت على div الداخلي ، فيمكنك فعل شيء كالتالي:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

وهذا يجعل div الداخلي في عنصر مضمّن يمكن توسيطه text-align .


إذا كنت لا ترغب في ضبط عرض ثابت ولا تريد الهامش الإضافي ، فأضف display: inline-block إلى العنصر الخاص بك.

يمكنك استخدام:

#element {
    display: table;
    margin: 0 auto;
}

الطريقة التي أقوم بها عادة هي استخدام الوضع المطلق:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

لا يحتاج div الخارجي إلى أي خصائص إضافية لهذا العمل.


بالنسبة لمتصفح فايرفوكس و Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

بالنسبة إلى Internet Explorer و Firefox و Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

خاصية text-align: الخاصية اختيارية للمتصفحات الحديثة ، ولكنها ضرورية في Internet Explorer Quirks Mode لدعم المتصفحات القديمة.


حاول اللعب معه

margin: 0 auto;

إذا كنت تريد توسيط النص أيضًا ، فجرّب استخدام:

text-align: center;

حسنًا ، تمكنت من العثور على حل ربما يناسب جميع المواقف ، لكني استخدم JavaScript:

وهنا الهيكل:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

وإليك مقتطف جافا سكريبت:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

إذا كنت ترغب في استخدامه في نهج متجاوب ، فيمكنك إضافة ما يلي:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

على سبيل المثال ، يمكنك الاطلاع على هذا الرابط والمقتطف أدناه:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

إذا كان لديك الكثير من الأطفال ضمن أحد الوالدين ، فيجب أن يكون محتوى CSS الخاص بك مثل هذا المثال على الكمان .

يبدو مظهر محتوى HTML كما يلي:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

ثم انظر هذا المثال على الكمان .


قم بتعيين width وتعيين margin-left margin-right إلى auto . هذا لأفقي فقط ، على الرغم من. إذا كنت تريد كلتا الطريقتين ، فستفعلها في كلا الاتجاهين. لا تخف من التجربة. ليس كأنك ستكسر أي شيء.


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


لقد اضطررت مؤخرًا إلى تركيز div "مخفي" (على سبيل المثال: display: none؛) الذي كان يحتوي على نموذج مضمن بداخله والذي يحتاج إلى توسيط في الصفحة. كتبت jQuery التالية لعرض div المخفية ثم قم بتحديث CSS إلى العرض التلقائي الذي تم إنشاؤه للجدول وتغيير الهامش لتوسيطه. (يتم تشغيل تبديل العرض بالنقر فوق ارتباط ، لكن هذا الرمز لم يكن ضروريًا للعرض.)

ملاحظة: أشارك هذا الرمز لأن Google قد جلبت لي حل هذا وكان كل شيء قد نجح فيما عدا أن العناصر المخفية ليس لها أي عرض ولا يمكن تغيير حجمها / توسيطها حتى يتم عرضها.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>


لقد قمتُ بإنشاء هذا example لإظهار كيفية align رأسية وأفقية .

الرمز هو في الأساس هذا:

#outer {
  position: relative;
}

و...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

وسيبقى في center حتى عند إعادة حجم الشاشة.


لنفترض أن عرض div يبلغ 200px :

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

تأكد من أن العنصر الأصل في positioned نسبية أو ثابتة أو مطلقة أو لزجة.

إذا كنت لا تعرف عرض div ، فيمكنك استخدام transform:translateX(-50%); بدلا من الهامش السلبي.

https://jsfiddle.net/gjvfxxdj/


هذه الطريقة تعمل أيضا على ما يرام:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

بالنسبة للداخل <div> ، يكون الشرط الوحيد هو أن لا يكون height width أكبر من حجم الحاوية الخاصة به.


هناك خيار واحد وجدته:

الجميع يقول لاستخدام:

margin: auto 0;

ولكن هناك خيار آخر. تعيين هذه الخاصية للالأم الأصل. يعمل على أكمل وجه في أي وقت:

text-align: center;

وانظر ، يذهب الطفل المركز.

وأخيرًا CSS لك:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

يمكنك فعل شيء كهذا

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

سيؤدي هذا أيضًا إلى محاذاة #inner عموديًا. إذا كنت لا ترغب في ذلك ، فقم بإزالة display وخصائص vertical-align ؛








centering