html - كيف تركز أفقيا<div>؟



css alignment centering (25)

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

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

Answers

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

margin: 0 auto;

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

text-align: center;

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

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

الحاوية:

  • يجب أن يكون 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>

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


لقد اضطررت مؤخرًا إلى تركيز 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>


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

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>

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


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


يمكنك تطبيق CSS على الـ <div> الداخلي:

#inner {
  width: 50%;
  margin: 0 auto;
}

بالطبع ، لا يتعين عليك ضبط width على 50% . أي عرض أقل من المحتوي <div> سيعمل. margin: 0 auto هو ما هو التمركز الفعلي.

إذا كنت تستهدف IE8 + ، فقد يكون من الأفضل استخدام ذلك بدلاً من ذلك:

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

وسوف يجعل مركز العنصر الداخلي أفقيا ويعمل دون تحديد width معين.

مثال العمل هنا:

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


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

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

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


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

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

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

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


هذا هو جوابي.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


إليك ما تريده بأقصر الطرق.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

أسهل طريقة:

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


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

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

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


أفضل الطرق هي مع CSS 3 .

نموذج الصندوق:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

وفقا للاستخدام الخاص بك ، يمكنك أيضا استخدام box-orient, box-flex, box-direction خصائص box-orient, box-flex, box-direction .

فليكس :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

قراءة المزيد حول توسيط العناصر الفرعية

وهذا ما يفسر السبب في أن نموذج الصندوق هو أفضل طريقة :


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

  • .outer - العرض الكامل
  • .inner - بدون مجموعة عرض (ولكن يمكن تحديد أقصى عرض)

لنفرض أن العرض المحسوب للعناصر يبلغ 1000 بكسل و 300 بكسل على التوالي. استكمل كما يلي:

  1. التفاف داخل داخل. .center-helper
  2. جعل .center-helper كتلة مضمنة. يصبح الحجم نفسه مثل .inner مما يجعله 300 بكسل على نطاق واسع.
  3. دفع. .center-helper 50 ٪ الحق بالنسبة إلى الأم. هذا يضع يساره في 500px wrt. الخارجي.
  4. دفع .inner 50 ٪ إلى اليسار إلى الوالد. هذا يضع يساره في -150px wrt. مساعد المركز يعني أن يسارها هو 500 - 150 = 350 بكسل. الخارجي.
  5. تعيين تجاوز على .outer مخفية لمنع شريط التمرير الأفقي.

عرض:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

تتمتع Flex بأكثر من 97٪ من تغطية دعم المستعرض وقد تكون أفضل طريقة لحل هذا النوع من المشاكل في حدود قليلة:

#outer {
  display: flex;
  justify-content: center;
}

لقد قمتُ بإنشاء هذا 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/


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

تطبيق 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>



بالنسبة لمتصفح فايرفوكس و 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 لدعم المتصفحات القديمة.


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

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

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

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


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

#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 ؛


توسيط div غير معروف الارتفاع والعرض

أفقيا ورأسيا. يعمل مع متصفحات حديثة إلى حد معقول (Firefox و Safari / WebKit و Chrome و Internet Explorer 10 و Opera وغيرها)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

العبث به كذلك على Codepen أو على JSBin .


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


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

#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





html css alignment centering