it-swarm.dev

CSS: طريقة استجابة لتوسيط div div (بدون عرض px) مع تحديد الحد الأقصى للعرض؟

لقد رأيت مليون سؤال حول كيفية توسيط عنصر كتلة ويبدو أن هناك عدة طرق شائعة للقيام بذلك ، لكنهم يعتمدون جميعًا على عرض بكسل ثابت. ثم إما margin:0 auto أو مع وضع مطلق/نسبي و left:50%; margin-left:[-1/2 width]; إلخ. نعلم جميعًا أن هذا لن ينجح إذا كان للعنصر عرض محدد في٪.

هل هناك حقا أي طريقة للقيام بذلك بطريقة السوائل حقا؟ أنا أتحدث عن استخدام % للعرض ( لا إعداد أكثر من عشر استعلامات للوسائط ذات عرض ثابت صغير بشكل متزايد).

احذر: هناك الكثير من الحلول التي تستخدم الكلمة الطنانة "متجاوبة" ولكن لا لا تجيب على سؤالي (لأنها تستخدم عروضًا ثابتة على أي حال). إليك مثال .

التحديث: لقد نسيت تقريبا: كيف يمكنك التعامل مع الحد من العرض الأقصى للعنصر المتمركز وما زلت تحتفظ به في الوسط؟ انظر تعليقي تحت إجابة smdrager @. مثال على الحياة الحقيقية. أريد أن تظهر رسالة منبثقة أو تأثير مربع ضوئي يحتوي على فقرة من النص في الوسط في النافذة وأن يلتف النص بسائل وفقًا للعرض. لكنني لا أريد أن يمتد مربع النص إلى أقصى الحدود حيث يصعب قراءة النص (تخيل شاشة 4 أقدام بثلاث فقرات ممتدة على سطر واحد من النص). إذا قمت بإضافة أقصى عرض لمعظم الطرق ، فسيتوقف المربع المركزي عن التركيز عند الوصول إلى الحد الأقصى للعرض.

26
emersonthis

توسيط أفقيًا وعموديًا

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

لذلك إذا كان الارتفاع 40 ٪ ، 100 ٪ - 40 ٪ = 60 ٪. لذلك تريد 30 ٪ أعلاه وتحت. ثم أعلى: 30 ٪ لا الحيلة.

انظر المثال هنا: http://dabblet.com/Gist/5957545

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

استخدام كتلة مضمنة. الجواب الآخر هنا لن يعمل من أجل IE 8 أو أقل ، ومع ذلك. يجب عليك استخدام CSS أو أنماط مشروطة لذلك. هنا هو نسخة الاختراق:

انظر المثال هنا: http://dabblet.com/Gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

تصحيح

باستخدام استعلامات الوسائط ، يمكنك دمج أسلوبين لتحقيق التأثير الذي تريده. المضاعفات الوحيدة هي الارتفاع. يمكنك استخدام div المتداخل للتبديل بين٪ width و

http://dabblet.com/Gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
42
smdrager

من مقالة كريس كويير عن توسيط عرض النسبة المئوية العناصر:

بدلاً من استخدام الهوامش السلبية ، يمكنك استخدام التحويلات السلبية translate().

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

18
Brian Phillips

أعتقد أنه يمكنك استخدام display: inline-block على العنصر الذي تريد توسيطه وتعيينه text-align: center; على والدها. هذا بالتأكيد مركز div على جميع أحجام الشاشة.

هنا يمكنك أن ترى كمان: http://jsfiddle.net/PwC4T/2/ أقوم بإضافة الرمز هنا للتأكد من اكتماله.

[~ # ~] أتش تي أم أل [~ # ~]

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

[~ # ~] المغلق [~ # ~]

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

للتوسيط العمودي ، أنا "أسقطت" الدعم لبعض المتصفحات القديمة لصالح display: table; ، التي تقلل الكود تمامًا ، انظر هذا الكمان: http://jsfiddle.net/jFAjY/1/

إليك الكود (مرة أخرى) للتأكد من اكتماله:

[~ # ~] أتش تي أم أل [~ # ~]

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

[~ # ~] المغلق [~ # ~]

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

الاستفادة من هذا النهج؟ ليس عليك التعامل مع أي نسبة ، كما أنه يعالج بشكل صحيح <video> العلامة (html5) ، التي لها مقاسان مختلفان (واحد أثناء التحميل ، واحد بعد التحميل ، لا يمكنك جلب حجم العلامة 'حتى يتم تحميل الفيديو).

الجانب السلبي هو أنه يسقط الدعم لبعض المستعرضات القديمة (أعتقد أن IE8 لن يتعامل مع هذا بشكل صحيح)

12
Fire-Dragon-DoL

تحرير:
http://codepen.io/gcyrillus/pen/daCy لذلك ، من أجل نافذة منبثقة ، يجب عليك استخدام الموضع: ثابت ، عرض: خاصية الجدول وعرض أقصى مع em أو rem القيم:)
مع أساس CSS هذا:

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
1
G-Cyr

هذا قد يبدو حقا التبسيط ...

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

margin-right: 10%;
margin-left: 10%;

ثم يمكنك ضبط٪ لجعلها واسعة كما تريد.

0
Bruno Vincent

شيء من هذا القبيل يمكن أن يكون؟

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

العرض التوضيحي: http://jsfiddle.net/t5Pp2/2/

تحرير: مضيفا display:block لا يفسد الشيء ، لذلك ...

يمكنك أيضًا تعيين الهامش على: margin: 0 auto 0 auto; فقط للتأكد من أنه يركز فقط بهذه الطريقة وليس من الأعلى أيضًا.

0
Ms. Nobody