چگونه یک عنصری که عرضش را مشخص کرده ایم به وسط صفحه بیاوریم
سلام دوستان
من در طراحی سایتی که باید انجام بدهم به یک مشکل عجیب خورده ام وقتی به یک div عرض می دهم دیگر text-align رویش اثر نمی کند.
به عنوان مثال کد زیر را در نظر بگیرید من انتظار دارم متنی که به آن کلاس g داده ام در وسط صفحه قرار بگیرد اما در کمال تعجب سمت چپ می ماند.
ممکن است از دوستان کسی لطف نموده راهنمایی کند که چرا این اتفاق می افتد و اینکه من چطور میتونم اون div رو به مرکز صفحه بیاورم؟
کد:
کد HTML:
<!DOCTYPE html>
<html lang="en" dir="">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style type="text/css">
.g{
border:1px solid red;
background-color: blue;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<div class="g ">
hi my name is shahin
</div>
</div>
</div>
</body>
</html>
همان طور که می بینید در کد بالا یک div وجود دارد که کلاسی به نام g دارد و من می خواهم این div را به مرکز صفحه بیاورم برای اینکار از کلاس های بوت استرپ استفاده کرده ام و
با دادن کلاس text-center قصد انجام اینکار را داشته ام که موفق نشده ام .
نکته ی جالب در کد فوق اینکه اگر عرض را مشخص نکنم یعنی width:200px را حذف کنم نوشته به مرکز می آید.
ممکن است راهنمایی بفرماییید؟
خب البته من میتوانم به ان div مارجین چپ بدهم مثلا بگویم
margin-left: 600px
اما بعید می دونم این راه حل ایده آلی باشه
خیلی ممنون
نقل قول: چگونه یک عنصری که عرضش را مشخص کرده ایم به وسط صفحه بیاوریم
اگه اشتباه نکنم اینجا متن وسط چین هست اما وسط div با کلاس g قرار داره اما خود div با کلاس g وسط چین نیست. اما وقتی بهش عرض نمیدین این div کل فضای div والد رو اشغال میکنه پس وسط چین شدن متن توش کافیه. تو اینجا الآن باید div با کلاس g رو به وسط بیارین. که راه های مختلفی داره اما شاید راه ترین راه استفاده از مارجین auto هس.
نقل قول: چگونه یک عنصری که عرضش را مشخص کرده ایم به وسط صفحه بیاوریم
برای وسط چین کردن (Centering) عناصر در اچ تی ام ال راه های زیادی وجود داره ساده ترینش بصورت زیره
به کنترل والد تگی که می خواهید وسط چین بشه - در مثال شما Div با کلاس text-center که ظرفی برای کلاس g میشه خاصیت های زیر رو بدید
display: flex;
justify-content: center;
به Div با کلاس g هم می تونید خاصیت زیر رو بدید - (البته اگر اعمال نشه هم وسط چین میشه)
align-self: center;
البته پشتیبانی در مرورگرهای قدیمی رو هم باید در نظر بگیرید -
نقل قول: چگونه یک عنصری که عرضش را مشخص کرده ایم به وسط صفحه بیاوریم
به نظرم برا وسط چین کردن عناصر راه های بهتری هم هست. فلکس باکس روشی فوق العاده عالیه. اما متاسفانه پشتیبانی خوبی مرورگر های قدیمی ازش ندارن. پس برای کارای ساده نمی ارزه ازش استفاده کنیم و ریسک عدم پشتیبانی رو قبول کنیم. فلکس باکس کاربردش توجاهای حرفه ای تره.
