قرار دادن div یا باکس در مرکز صفحه در حالت شناور یا fixed
آموزشفرانت اند(اhtml-css-javascript)
زمانی که یا المان یا یک div را در css در حالت position:fixed یا position:absolute قرار میدهیم ، برای تغییر مکان آن از دستور های left - right - top - botton استفاده می کنیم.
در حالت absolute مقادیر بالا نسبت به نزدیکترین المان پدر که position:relative دارد تعیین می شود و در حالت position:fixed نسبت به صفحه یا window
خب اینکه ساده است ما اگر بگوییم مثلا از بالا یا top اندازه 50% و از left اندازه 50% مکان گیری کند باید دقیقا در وسط قرار گیرد ولی خیر...... اینجور نیست زیرا مقادیر top و left یا bottom و right و کلا همه اینها از لبه المان پدر مورد نظر مثلا left تا لبه المان ما است و برای top هم همینجور پس با این اوصاف وسط قرار نمی گیرد.
لینک زیر را مشاهده کنید تا دموی مثال بالا را زنده ببینید.
https://codepen.io/zhupin/pen/QWJexxR
برای اینکه دقیقا در مرکز قرار گیرد باید مرکز المان ما با مرکز المان پدر متحد المرکز شود که برای این کار کافیست از transform:translate استفاده کنید و از بالا و پایین به مقدار -50% عقب بکشیم.
لینک زیر نیز حاوی مثال بالا و کد های لازم است .
https://codepen.io/zhupin/pen/wvQVXEN
کامنت و لایک فراموش نشه.
ارسال نظر
جهت قرار دادن کد در متن کامنت ، متن مورد نظر را انتخاب کنید و دکمه بالا را بزنید