shahin53
دوشنبه 22 مرداد 1397, 14:11 عصر
سلام دوستان
من در طراحی سایتی که باید انجام بدهم به یک مشکل عجیب خورده ام وقتی به یک div عرض می دهم دیگر text-align رویش اثر نمی کند.
به عنوان مثال کد زیر را در نظر بگیرید من انتظار دارم متنی که به آن کلاس g داده ام در وسط صفحه قرار بگیرد اما در کمال تعجب سمت چپ می ماند.
ممکن است از دوستان کسی لطف نموده راهنمایی کند که چرا این اتفاق می افتد و اینکه من چطور میتونم اون div رو به مرکز صفحه بیاورم؟
کد:
<!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 عرض می دهم دیگر text-align رویش اثر نمی کند.
به عنوان مثال کد زیر را در نظر بگیرید من انتظار دارم متنی که به آن کلاس g داده ام در وسط صفحه قرار بگیرد اما در کمال تعجب سمت چپ می ماند.
ممکن است از دوستان کسی لطف نموده راهنمایی کند که چرا این اتفاق می افتد و اینکه من چطور میتونم اون div رو به مرکز صفحه بیاورم؟
کد:
<!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
اما بعید می دونم این راه حل ایده آلی باشه
خیلی ممنون