سلام دوستان
من در طراحی سایتی که باید انجام بدهم به یک مشکل عجیب خورده ام وقتی به یک div عرض می دهم دیگر text-align رویش اثر نمی کند.
به عنوان مثال کد زیر را در نظر بگیرید من انتظار دارم متنی که به آن کلاس mydiv داده ام در وسط صفحه قرار بگیرد اما در کمال تعجب سمت چپ می ماند.
ممکن است از دوستان کسی لطف نموده راهنمایی کند که چرا این اتفاق می افتد و اینکه من چطور میتونم اون div رو به مرکز صفحه بیاورم؟
<!DOCTYPE html>
<html lang="en" dir="">
<head>
<title> 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">
.mydiv{
border:1px solid red;
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center">
<div class="mydiv">
hi my name is bardia
</div>
</div>
</div>
</body>
</html>
همان طور که می بینید در کد بالا یک div وجود دارد که کلاسی به نام mydiv دارد و من می خواهم این div را به مرکز صفحه بیاورم برای اینکار از کلاس های بوت استرپ استفاده کرده ام و
با دادن کلاس text-center قصد انجام اینکار را داشته ام که موفق نشده ام .
نکته ی جالب در کد فوق اینکه اگر عرض را مشخص نکنم یعنی width:300px را حذف کنم نوشته به مرکز می آید.
ممکن است راهنمایی بفرماییید؟
خب البته من میتوانم به ان div مارجین چپ بدهم مثلا بگویمmargin-left: 600px
اما بعید می دونم این راه حل ایده آلی باشه
خیلی ممنون
