كيفية توسيط <div> أفقيًا؟

Question

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

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

Answer 1

يمكنك تطبيق 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;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

Answer 2

إذا كنت لا ترغب في تعيين عرض ثابت على الجزء الداخلي div يمكنك أن تفعل شيئا مثل هذا:

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

#inner {
  display: inline-block;
}

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

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

Answer 3

أفضل الأساليب هي مع سي اس اس 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%;
}

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

وفقًا لسهولة الاستخدام، يمكنك أيضًا استخدام box-orient, box-flex, box-direction ملكيات.

ثني:

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

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

• الرابط 2

• الرابط 3

• الرابط 4

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

• لماذا يعتبر نموذج صندوق W3C أفضل؟

Answer 4

لنفترض أن div الخاص بك هو 200px واسع:

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

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

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

https://jsfiddle.net/gjvfxxdj/

Answer 5

لقد خلقت هذا مثال لإظهار كيفية عموديا و أفقيا align.

الكود هو في الأساس هذا:

#outer {
  position: relative;
}

و...

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

وسيبقى في center حتى عندما كنت تغيير الحجم شاشتك.

Answer 6

ذكرت بعض الملصقات طريقة CSS 3 للتوسيط باستخدامها display:box.

بناء الجملة هذا قديم ولا ينبغي استخدامه بعد الآن.[أنظر أيضا هذا المشنور].

لذا، من أجل الاكتمال، إليك أحدث طريقة للتوسيط في CSS 3 باستخدام وحدة تخطيط الصندوق المرنة.

لذلك إذا كان لديك ترميز بسيط مثل:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...وتريد توسيط العناصر الخاصة بك داخل المربع، إليك ما تحتاجه في العنصر الأصلي (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

إذا كنت بحاجة إلى دعم المتصفحات الأقدم التي تستخدم بناء الجملة الأقدم لـ flexbox هنا مكان جيد للنظر.

Answer 7

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

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

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

Answer 8

توسيط 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>

العبث بها أبعد من ذلك كودبن أو على JSBin.

Answer 9

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

Answer 10

خاصية محاذاة الصندوق في CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Answer 11

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

Answer 12

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

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

$(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>

Answer 13

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

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

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

Answer 14

لمتصفح فايرفوكس وكروم:

<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: تعد الخاصية اختيارية للمتصفحات الحديثة، ولكنها ضرورية في وضع Quirks في Internet Explorer لدعم المتصفحات القديمة.

Answer 15

هذا هو جوابي.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

الحل الآخر لهذا دون الحاجة إلى تعيين عرض لأحد العناصر هو استخدام CSS 3 transform يصف.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

الحيلة هي ذلك translateX(-50%) يحدد #inner العنصر 50 بالمائة على يسار عرضه.يمكنك استخدام نفس الحيلة للمحاذاة العمودية.

وهنا أ كمان إظهار المحاذاة الأفقية والرأسية.

مزيد من المعلومات على شبكة مطوري موزيلا.

Answer 17

كريس كويير الذي كتب وظيفة ممتازة حول "التمركز في المجهول" على مدونته.إنها مجموعة من الحلول المتعددة.لقد نشرت واحدة لم يتم نشرها في هذا السؤال.إنه يتمتع بدعم متصفح أكثر من حل flexbox، وأنت لا تستخدمه display: table; والتي يمكن أن تكسر أشياء أخرى.

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

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 18

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

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

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

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

Answer 19

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

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>

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

Answer 20

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

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

الحاوية:

• يجب ان 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>

أنظر أيضا هذا الكمان!

Answer 21

أسهل طريقة:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

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

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

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

1. طَوّق .inner داخل .center-helper
2. يصنع .center-helper كتلة مضمنة؛يصبح بنفس الحجم .inner مما يجعلها بعرض 300 بكسل.
3. يدفع .center-helper 50% حق بالنسبة إلى الشركة الأم؛هذا يضع يساره عند 500 بكسل 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%;
}

Answer 23

يمكنك أن تفعل شيئا من هذا القبيل

#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 ملكيات؛

Answer 24

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

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 % );
}

Answer 25

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

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

• display: block
• display: inline
• display: inline-block

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

---

فليكس بوكس

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

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

#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.إنه يعمل على المتصفحات القديمة ومعظم المتصفحات الجديدة ولكنه لا يعتبر ممارسة جيدة لأن هذه الميزة كذلك عفا عليها الزمن وتمت إزالته من معايير الويب.

#inner {
  display: inline-block;
}

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

Answer 26

يمكنك استخدام display: flex بالنسبة للقسم الخارجي الخاص بك والتوسيط الأفقي عليك إضافته justify-content: center

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

أو يمكنك زيارة w3schools - خاصية CSS المرنة لمزيد من الأفكار.

Answer 27

تعمل هذه الطريقة أيضًا بشكل جيد:

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

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

Answer 28

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

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

Answer 29

حسنًا، لقد تمكنت من العثور على حل ربما يناسب جميع المواقف، ولكنه يستخدم 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>

وإليك مقتطف JavaScript:

$(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);
  })
});

Answer 30

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

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

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 */
}