بحاجة الى مساعدة CSS تركز مع المواقع المطلق

StackOverflow https://stackoverflow.com/questions/1034449

  •  06-07-2019
  •  | 
  •  

سؤال

لم أكن راضيا تماما مع بلدي حلول مختلفة لتركز المحتوى في صفحة الويب. لقد تم إهمال العلامة <center> مرة أخرى في منتصف القرن ال18، ولكن لا أستطيع أن أرى بديلا معقولا. على وجه التحديد ما أريده هو أن يكون DIV الأم أن يتركز، ولكن ضد الذين العلوي الأيسر ناحية الزاوية يمكنني وضع الأمور في نصابها "على الاطلاق".

هل هناك طريقة لتحقيق ذلك دون استخدام window.onresize جافا سكريبت أن remeasures كل شيء؟ يبدو وكأنه فكرة التوالي إلى الأمام نوعا ما ... أريد أشياء وضعه تماما، أريد فقط 0،0 تنسيق لتكون نسبة إلى شيء آخر من أعلى الزاوية اليسرى من نافذة المتصفح.

والآن، ما أقوم به هو وضع شعبة لمركز محتواه ثم المعكرونة حولها مع تحديد المواقع النسبية، ولكن هذا ممل جدا لأن الأجسام النسبية الاستمرار في دفع بعضها البعض في جميع أنحاء بطرق أنا تماما لا تريد.

وأي وجميع الأفكار حول هذا تقدير كبير.

هل كانت مفيدة؟

المحلول

وهذا هو ما كنت تبحث عنه؟ 

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

نصائح أخرى

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

ومجرد مثال ورمز، ولكن أي عنصر .child سيكون في 0،0 من المجمع

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

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>

إذا كنت العالقة مع position: absolute; ثم تعيين شعبة الذي تريد الأشياء وضعه ضد أن يكون position: relative; لجعله سياق تحديد المواقع عن أي عناصر تابعة.

لتوسيط شعبة ضعه على الاطلاق عليك أن تعرف أنه من العرض، ثم استخدم CSS التالية: 

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

وفي HTML: 

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

ويمكنك قرص العرض والهامش الأيسر كما كنت في حاجة إليها (يجب أن يكون الهامش الأيسر سلبي نصف العرض من شعبة كنت تركز على سبيل المثال. #child.

وكما ذكر أشخاص آخرين باستخدام margin: 0 auto; على عنصر مع عرض تعيين على أنها ستركز عليه.

وأنا طريقة لطيفة لمركز الاشياء هي استخدام "هامش: السيارات" علامة المغلق. هذا وتعمل في FF وسفاري. مجرد إعطاء بعض شعبة العرض والسيارات الهامش، وإذا كان الوالد هو عرض 100٪، ثم وهذا شعبة ومركز ينحز.

لهذا العمل في IE، لديك لاستخدام مواءمة النصوص: السمة مركز على الأصل ثم النص محاذاة اليسار على شعبة تركزت الفعلي

وAFAIK، لا توجد وسيلة لتغيير المطلقة تنسق من 0،0 إلى بعض نقطة arbit أخرى. قريب هو الطريق للذهاب.

وربما لم أكن أفهم المهمة ولكن اعتقد انه يمكن استخدام 

margin: 0 auto;

ولتركز عناصر div بك

استخدم تحديد المواقع النسبية على الوالدين وإعطاء هذا العنصر نفس العقار: 

margin: 0 auto;

والآن يتم وضع الأم ويجب أن تكون قادرة على وضع العناصر على الاطلاق في داخلها.

مثال: 

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

وأسهل طريقة: 

#element {

position: absolute; /*Absolute Position*/

top: 0; 
left: 0;          /*Set the 4 coordinates to zero*/
bottom: 0; 
right: 0;

margin: auto;      /*Margin to Auto*/

height: 150px;   /*Set the Height and Width*/
width:150px;

background:green; /* Backgroung:optional*/

و}

وهذا يحقق لها الحق في منتصف، بغض النظر عن حجمه.

وعلى أمل أن يساعد!

وانظر كمان: http://jsfiddle.net/kfPC6/

ولا تريد تحديد المواقع نسبي إذا 0،0 ستكون نسبة إلى شعبة؟

والخاصية text-align: center; يفعل ما <center> تستخدم لوأنه يتفوق عليه.

والشيء الوحيد هو، انها قليلا أكثر تعقيدا للاستخدام. بمجرد الحصول على تعليق منه، فسوف أتساءل لماذا كانوا يتناولون الكثير من المتاعب من قبل!

ويجب استخدامه بالتنسيق مع خصائص العناصر الأخرى على الصفحة. تلك هي القضية المطورين / المصممين مع CSS و HTML التقنيات الحديثة. هذا يعطينا وسيلة قوية لتقديم عناصر صفحتنا لكن يجعلها أكثر تعقيدا وصرامة بكثير.

والجواب مايك روبنسون يحل بالتأكيد مشكلة كنت تواجه هنا وانها مثال عظيم. ولكن ...

وأنا لا أعتقد أن أي إجابة واحدة تظهر لك كيفية استخدام text-align بشكل صحيح لجميع الحالات سوف تأتي عبر ولكن حاول تبحث في كيفية تحديد المواقع في CSS يعمل أكثر تعمقا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top