حيل توسيط CSS [مغلق]
https://stackoverflow.com/questions/148251
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
المعادلة المفضلة لدي لتوسيط عنصر xhtml باستخدام CSS فقط هي كما يلي:
display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_
هناك أيضًا طريقة أبسط للهامش: تلقائي في المتصفحات التي تدعمها.هل لدى أي شخص آخر طرقًا صعبة لإجبار المحتوى على العرض في وسط الحاوية الخاصة به؟(نقاط المكافأة للتمركز العمودي)
تحرير - عفوًا، لقد نسيت الجزء "السلبي" من الجزء الموجود في الهامش الأيسر.مُثَبَّت.
المحلول
العصا مع الهامش:0 تلقائي؛للمحاذاة الأفقية.إذا كنت بحاجة إلى محاذاة رأسية وكذلك استخدم الموضع:مطلق؛قمة:50%;أعلى الهامش:-(العرض/2)بكسل؛ومع ذلك، كن على علم، إذا كانت الحاوية الخاصة بك ذات عرض أكبر من شاشتك، فسوف يسقط جزء منها من الشاشة على الجانب الأيسر باستخدام الموضع:الطريقة المطلقة.
نصائح أخرى
div #centered{
margin: 0 auto;
}
يبدو أنه الأكثر موثوقية من تجربتي.
حسنًا، هذا يبدو مبالغة كبيرة، يجب أن أقول.أنا أميل إلى ضبط الحاوية على text-align:center; للمتصفحات القديمة margin:auto; للمتصفحات الحديثة، واترك الأمر هكذا.ثم قم بإعادة تعيين محاذاة النص في العنصر (إذا كان يحتوي على نص).
بالطبع، تحتاج بعض الأشياء إلى الإعداد ككتلة، ويحتاج العرض إلى الإعداد...ولكن ما الذي تحاولين تصميمه على وجه الأرض؟ الذي - التي الكثير من القرصنة حولها؟
<div style="text-align:center">
<div style="width:30px; margin:auto; text-align:left">
<!-- this div is sitting in the middle of the other -->
</div>
</div>
يعمل Margin:auto في كافة المتصفحات طالما أنك تتأكد من أن IE في الوضع القياسي.
إنه أكثر انتقائية من الآخرين ويتطلب أن يكون نوع المستند الخاص بك هو الأول في مستندك، مما يعني عدم وجود مسافة بيضاء (مسافة أو علامات تبويب أو خلاصات أسطر) قبله.
إذا قمت بذلك، فإن هامش: تلقائي هو الطريق الصحيح!:)
مجرد ملاحظة أن الهامش: تلقائي؛تعمل الطريقة فقط إذا تمكن المتصفح من حساب عرض العنصر المراد توسيطه وعرض الحاوية الأصلية.في كثير من الحالات تحديد العرض: تلقائي؛يعمل، ولكن في بعض لا.
إن تحديد الموضع المطلق بنسبة 50% له أثر جانبي شديد يتمثل في أنه إذا كانت نافذة المتصفح أضيق من العنصر، فسيظهر بعض المحتوى من الجانب الأيسر من المتصفح - دون أي وسيلة للتمرير إليه.
التزم بالهوامش التلقائية - فهي أكثر موثوقية بكثير.
إذا كنت تعمل في الوضع القياسي (وهو ما ينبغي أن تكون عليه)، فهي مدعومة في جميع المتصفحات التي من المحتمل أن تهتم بها.
يمكنك استخدام اختراق محاذاة النص إذا كنت تريد حقًا دعم Internet Explorer 5.5 والإصدارات الأقدم.
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
يعمل هذا بشكل جيد في جميع المتصفحات المعتادة.كما ذكر سلفا margin: 0 auto; لن تعمل في كافة الإصدارات شبه الحالية من IE.
جرب هذا؛لا أعرف إذا كان يعمل في IE، يعمل بشكل جيد في Fx بالرغم من ذلك.يقوم بتوسيط كتلة DIV على الصفحة باستخدام CSS فقط (بدون JavaScript)، بدون هامش تلقائي، ويظل النص الموجود داخل كتلة DIV محاذيًا لليسار.أنا فقط أحاول معرفة ما إذا كان التمركز العمودي يمكن أن يعمل بهذه الطريقة أيضًا، ولكن حتى الآن دون نجاح.
<html>
<head>
<title>Center Example</title>
<style>
.center {
clear:both;
width:100%;
overflow:hidden;
position:relative;
}
.center .helper {
float:left;
position:relative;
left:50%;
}
.center .helper .content {
float:left;
position:relative;
right:50%;
border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
<div class="helper">
<div class="content">Centered on the page<br>and left aligned!</div>
</div>
</div>
</body>
</html>
