لا يمكن الحصول على عناصر CSS توسيط

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

  •  20-09-2019
  •  | 
  •  

سؤال

لا يمكن الحصول على بلدي الموقع إلى أن تركز على حياة لي مع CSS.لقد حاولت كل الطرق المعتادة اقترح في جميع أنحاء شبكة الإنترنت بما في ذلك:

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

ثم استخدام

<div id="container>
<!-- Centered Content Goes here-->
</div>

لكنها فقط لن تذهب إلى المركز.فإنه يبقى في الجانب الأيسر من الصفحة.

مثال المغلق العنصر الذي أريد أن يكون محورها هو هذا:

#topHeader
{
    background:url(images/top_header.jpg);
    position:absolute;
    width: 695px;
    height: 242px;
    top: 0px;
    left: 0px;
}

إذا HTML تبدو مثل هذا:

<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>

ولكن كما ذكرت من قبل عنصر في مكانه.وذلك بفضل!اريك

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

المحلول

والقضية الرئيسية هي تحديد المواقع المطلق للعنصر #topHeader الخاص بك. لأنك ذلك وضعه على الاطلاق مع top: 0px; left: 0px;، هذا هو بالضبط حيث انها سوف تكون في وضع - في الجزء العلوي الأيسر من الصفحة

وتبدأ عن طريق إزالة المواقع المطلق من العنصر #topHeader.

نصائح أخرى

وحاول مع هذا مركز ميت

وحاول إضافة هذا إلى أعلى الملف المغلق الخاص بك: 

// Wipes out any preexisting padding and margin.
html, body {
    padding: 0;
    margin: 0;
}

وثم إضافة الموقف: النسبية. التوجيه إلى فئة تريد تركزت. في الواقع، في محاولة إضافته إلى أتش تي أم أل، جسد واحد حتى يتسنى لجميع الفصول الدراسية تستخدم الوضع النسبي. قد يكون لديك الموقف: مطلقة؛ مجموعة التي ثم يجمع مع اليسار: 0px؛ لإجبار رأس الخاص بك يحتوي على تجاهل الهامش: 0 السيارات. والبقاء على يسار الصفحة.

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

المطلق

المربع موقف (وربما الحجم) هو المحدد مع 'رأس' ، 'الحق', 'أسفل' ، و 'اليسار' خصائص.هذه الخصائص تحديد إزاحة فيما يتعلق مربع تحتوي على كتلة.تماما وضع صناديق تؤخذ من التدفق الطبيعي.وهذا يعني أنها قد لا التأثير على تخطيط في وقت لاحق الأشقاء.أيضا ، على الرغم الاطلاق وضع صناديق هوامش يفعلون لا تنهار مع أي الهوامش.

- 9.3.1 اختيار المواقع الخطة:'موقف' الملكية

المطلق:

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:absolute;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

النسبية:

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:relative;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

وشيء واحد للتحقق عند محاولة الخروج كل هذه أساليب تركز هو التأكد من أن نوع المستند الخاص بك هو الصحيح للأسلوب الذي يتم استخدامه.

وآمل أن يساعد هذا بالنسبة لك.

بقدر ما أنا أعلم أنه ببساطة لا يعمل. text-align مراكز النص أو المحتوى المضمن ، ليس كتلة العناصر.

تحرير: من ناحية أخرى منحل الارتباط المنطقي.للأسف فقط عن ثابت الحجم كتل.

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