آوردن عنصر در وسط صفحه

حل شده 

CSS

توسط bardia-t در 1 سال پیش
2 23.2k 1 1 سال پیش
bardia-t digisys
0

سلام دوستان

من در طراحی سایتی که باید انجام بدهم به یک مشکل عجیب خورده ام وقتی به یک 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

اما بعید می دونم این راه حل ایده آلی باشه

خیلی ممنون

پاسخ ها

0

سلام. کافیه برای margin مقدار right و left رو روی auto بذارید

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید