vertically - vertical align div css




كيفية محاذاة<div> إلى المنتصف(أفقيًا/عرضًا) للصفحة (17)

لدي علامة div width إلى 800 بكسل . عندما يكون عرض المستعرض أكبر من 800 بكسل ، لا يجب أن يقوم div ولكنه يجب أن يصل إلى منتصف الصفحة.


  1. هل تقصد أنك تريد توسيطه رأسيًا أو أفقيًا؟ قلت إنك حددت height إلى 800 بكسل ، وأردت أن لا يمتد div عندما كان width أكبر من ذلك ...

  2. لتوسيط أفقي ، يمكنك استخدام margin: auto; السمة في المغلق. أيضًا ، سيتعين عليك التأكد من عدم html عناصر body و html على أي هامش أو حشو:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

أضف هذه الفئة إلى div التي تريد توسيطها (والتي يجب أن يكون لها عرض مجموعة):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

أو ، قم بإضافة عناصر الهامش إلى فئة div الخاصة بك ، مثل هذا:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

إذا كان محتوى مركزك في عمق divs أخرى ، فيمكن أن يوفر عليك الهامش فقط. لا شيء آخر. أواجه ذلك دائما عندما لا تستخدم إطار عمل مثل Bootstrap.



استخدم الرمز أدناه لتوسيط مربع div:

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}
<div class="box-content">
</div>


بسيطة http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

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

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}

توسيط دون تحديد عرض div:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

هذا شيء مثل العلامة <center> ، باستثناء:

  • جميع العناصر التابعة المباشرة (على سبيل المثال. <h1> ) من <center> سيتم وضعها أيضًا في المنتصف
  • يمكن أن يكون لعنصر block-inline حجم مختلف (يتم عرضه display:block إعداد display:block ) وفقًا لمتخلفات المستعرض

حل Flexbox الحديث هو طريقة الانتقال من / 2015. justify-content: center يستخدم المركز للعنصر الأصلي لمحاذاة المحتوى إلى مركزه.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

انتاج |

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>


في حالتي ، حجم شاشة الهاتف غير معروف ، هذا ما فعلته.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JS (قبل أن تحتاج لإظهار هذا DIV)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show(); 

لجعلها تعمل أيضًا بشكل صحيح في Internet Explorer 6 ، يجب عليك القيام بذلك على النحو التالي:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

هذا يعمل في IE أيضا ، الهوامش التلقائية لا.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}

هذا يمكن أن يتحقق بسهولة عبر حاوية مرنة.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

رابط المعاينة


position: absolute ومن ثم top:50% left:50% يضع الحافة العلوية في وسط الشاشة رأسياً ، والحافة اليسرى في المركز الأفقي ، ثم بإضافة margin-top إلى سلبي من ارتفاع div أي -100 يغيره فوق 100 ، وبالمثل margin-left . هذا يحصل على div بالضبط في منتصف الصفحة.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>  


تم توسيط Div عموديا وأفقيا داخل الوالدين دون تحديد حجم المحتوى

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

وهنا (انقر) هو نظرة عامة لطيفة مع بعض الحلول الأخرى.

وهنا (انقر) مثال آخر مع حل عرض مرنة مع خدعة -50 ٪ الشهيرة


<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

http://jsfiddle.net/NPV2E/

"العرض: 100٪" للعلامة "body" ، على سبيل المثال فقط. في المشروع الحقيقي قد تقوم بإزالة هذه الخاصية.





center