كيفية تصميم CSS على محورها العائمة تأكيد الحوار ؟
سؤال
أنا أبحث عن طريقة لعرض تأكيد الحوار الذي دائما تركز على الصفحة ، تطفو فوق صفحة.
حاولت ذلك لكن ليس دائما تركز على الإطلاق لأن موقف ثابت:
.Popup
{
text-align:center;
position: absolute;
bottom: 10%;
left: 27%;
z-index:50;
width: 400px;
background-color: #FFF6BD;
border:2px solid black;
}
أي فكرة ؟ شكرا
المحلول
حاول استخدام هذا CSS
#centerpoint {
top: 50%;
left: 50%;
position: absolute;
}
#dialog {
position: relative;
width: 600px;
margin-left: -300px;
height: 400px;
margin-top: -200px;
}
<div id="centerpoint">
<div id="dialog"></div>
</div>
#سنتربوينت يجب أن تكون الحاوية div الحوار
ملاحظة أن #سنتربوينت DIV يجب أن يكون داخل الجسم العنصر أو العناصر التي داخل لا الموقف:قريب ؛ الملكية
نصائح أخرى
وبالمقارنة مع @ الجواب توما، يمكنك القيام بذلك على عنصر واحد
#theDiv {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
height: 50px;
margin-top: -25px;
background: yellow;
}
<div id="theDiv" />
وهذا ما يسمح لك وضعه في أي مكان على الصفحة بغض النظر عن الحاويات الأصل وخصائص position
بهم.
وCSS3 تحويل يمكن استخدامها لتجنب عرض وهوامش ضمني:
.dialog {
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
والاستخدام مثال: http://tympanus.net/ codrops / 2013/06/25 / أنيق-مشروط نافذة الآثار /
.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}
وهذا هو المحاذاة الأفقية. المحاذاة العمودية هي اصعب قليلا. جوجل فقط حول ل"مركز العمودي المغلق" أو شيء من هذا.