05-03-2010, 16:46
|
|
|
חבר מתאריך: 06.05.04
הודעות: 297
|
|
אממ
יש 2 דרכים לעשות את מה שאתה רוצה (אולי קצת יותר זה תלוי בדרישות) כאן אני אתייחס רק לרעיון הפשוט שבמרכוז אובייקט.
אתה יכול להגדיר מיקום אבסולוטי לdiv(מיקום שהוא ביחס לאובייקט האב שמחזיק את הdiv במקרה שלנו הbody), להגדיר top של 50% וleft או right של 50% תלוי בכיוונית העמוד שלך, ולאחר מכן להגדיר שולים(margin) שליליים בצורה הבאה
קוד:
div.square
{
position: absolute;
top: 50%;
left:50%;
height: 100px;
width: 100px;
margin-left: -50px;
margin-top: -50px;
}
איך קובעים מה רוחב השוליים?
קוד:
margin-left: div-width/2
margin-top: div-height/2
עכשיו הדרך הזאת היא לא המועדפת עלי רק בגלל המיקום האבסולוטי שאני לא מחבב אותו במיוחד, ועלול לגרום לבלגאנים קטנים באתר שלנו.
הדרך השניה היא באמצעות טבלה, פשוט להגדיר לה גובה ורוחב מקסימלים, להגדיר את אחד התאים בה כ100% מגובה הטבלה, להוסיף לו את המאפיין vertical-align: middle והכול יופי טופי.
אולי יש עוד דרכים שהמשתמשים פה מכירים.
בדרך הראשונה הייתי משתמש כשיש לי אובייקט שצריך לצוף מעל כול האתר ולהופיע במרכז.
בדרך השניה הייתי משתמש שהאתר שלי כולו צריך ליהיות ממורכז.
|