it-swarm.dev

لماذا العرض: 100٪ لا يعمل على div {display: table-cell}؟

أحاول التركيز عموديًا وأفقيًا على بعض المحتويات التي تحتوي على شريحة صور (flexslider). كانت هناك بعض الأسئلة المشابهة لهذا السؤال ، لكنني لم أجد حلاً مرضًا ينطبق مباشرة على مشكلتي المحددة. بسبب قيود FlexSlider ، لا يمكنني استخدام position: absolute; على علامة img في تطبيقي.

لدي تقريبا الحل أدناه العمل. المشكلة الوحيدة هي أنني لا أستطيع الحصول على إعلانات الطول والعرض للعمل على inner-wrapper div مع خاصية display: table-cell.

هل هذا السلوك القياسي ، أو هل أفتقد شيئًا برمزه؟ إذا كان هذا سلوكًا قياسيًا ، فما هو أفضل حل لمشكلتي؟

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

CSS

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

ملاحظة: سيكون المحتوى المركزي أكثر من عنصر واحد ، لذلك لا يمكنني استخدام خدعة ارتفاع الخط.

jsFiddle .

61
timshutes

يبدو أن وضع display:table; داخل .outer-wrapper يعمل ...

JSFiddle Link


EDIT: ملفان باستخدام خلية جدول العرض

أود أن أعلق على إجابتك ولكن لدي القليل من ممثل :( على أي حال ...

الخروج إجابتك ، يبدو أن كل ما عليك القيام به هو إضافة display:table; داخل .outer-wrapper (Dejavu؟) ، ويمكنك التخلص من table-wrapper بكل إخلاص.

JSFiddle

لكن نعم ، يتيح لك position:absolute وضع div على img ، قرأت بسرعة كبيرة وأعتقد أنك لا تستطيع استخدام position:absolute على الإطلاق ، لكن يبدو أنك تكتشفها بالفعل. الدعائم!

لن أعمل على نشر الكود المصدري ، بعد كل عملاته الزمنية البالغة 99٪ ، لذا يرجى الرجوع إلى إجابته ، أو مجرد استخدام رابط jsfiddle الخاص بي

التحديث: التفاف واحد باستخدام Flexbox

لقد مر بعض الوقت ، ويستخدم كل الأطفال الرائعين فليكس بوكس:

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>

حل JSFiddle الكامل

دعم المتصفح ( source ): IE 11+ ، FireFox 42+ ، Chrome 46+ ، Safari 8+ ، iOS 8.4+ (-webkit- بادئة) ، Android 4.1+ (-webkit- بادئة)

CSS الخدع: دليل ل Flexbox

كيفية توسيط في CSS : أدخل كيف تريد توسيط المحتوى الخاص بك ، ويقوم بإخراج كيفية القيام به في html و css. المستقبل هنا!

65
woojoo666

أنا أحسب هذا واحد خارج. وأنا أعلم أن هذا سوف يساعد شخص ما يوما ما.

كيفية توسيط Div عمودياً وأفقياً على Div على صورة ذات موضع نسبي

كان المفتاح المجمع الثالث. أود التصويت لصالح أي إجابة تستخدم مغلفات أقل.

HTML

<div class="wrapper">
    <img src="my-slide.jpg">
    <div class="outer-wrapper">
        <div class="table-wrapper">
            <div class="table-cell-wrapper">
                <h1>My Title</h1>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}

ul {
    width: 100%;
    height: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 100%;
}

.outer-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  margin: 0; padding: 0;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  display: table;
  vertical-align: middle;
  text-align: center;
}

.table-cell-wrapper {
  width: 100%;
  height: 100%;  
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

يمكنك رؤية العمل jsFiddle هنا.

12
timshutes

مرحبًا بكم في 2017 في هذه الأيام سوف يستخدم vW و vH يقومان بالخدعة

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw; /* only change is here "%" to "vw" ! */
    height: 100vh; /* only change is here "%" to "vh" ! */
}
<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>
5
caramba

اكتشفت أنه كلما زادت قيمة "العرض" ، كان حجم عرض المربع أصغر والعكس صحيح. لقد وجدت ذلك لأنني واجهت نفس المشكلة في وقت سابق. وبالتالي:

.inner-wrapper {
    width: 1%;
}

يحل المشكلة.

5
user7508996

100٪ تعني 100٪ من منفذ العرض ، يمكنك إصلاح ذلك باستخدام وحدة vw بجانب وحدة٪ في العرض. المشكلة هي أن 100vw مرتبط بمنظر العرض ، إلى جانب يرتبط٪ بالعلامة الرئيسية. هل تحب ذلك:

.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
1
Derzu

وماذا عن هذا؟ (رابط jsFiddle)

CSS

ul {
    background: #CCC;
    height: 1000%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
    position: absolute;
}
li {
 background-color: #EBEBEB;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    display: table;
    height: 180px;
    overflow: hidden;
    width: 200px;
}
.divone{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%; 

}
img {
    width: 100%;
    height: 410px;
}
.wrapper {
  position: absolute;
}
0
Hushme