شما اینجا هستید

چندین ویژگی برای تراز کردن عناصر به صورت افقی در CSS وجود دارد.

وسط چین با استفاده از margin

با تنظیم کردن پهنای یک عنصر بلاکی ازکشیده شدن آن به سمت کناره ها جلوگیری میکنیم. سپس میتوانید مقدار margin را روی auto قرار دهید تا عنصر در وسط مکانی که قرار دارد نمایش داده شود. سپس عنصر پهنای مشخص شده را میگیرد و فضای باقیمانده را به صورت مساوی بین دو حاشیه بیرونی چپ و راستش تقسیم میکند.

<html>

<head>

<style>

.center {

    margin: auto;

    width: 60%;

    border:3px solid #8AC007;

    padding: 10px;

}

</style>

</head>

<body>


<div class="center">

  <p><b>Note: </b>Using margin:auto will not work in IE8.</p>

</div>


</body>

</html>

 

اگر ویژگی width مشخص نشده باشد یا اینکه 100% تنظیم شده باشد، عنصر وسط چین نمیشود

برای ترازبندی متن به درس متن مراجعه کنید.

ترازبندی چپ و راست – با استفاده از position

یکی دیگر از روشهای ترازبندی استفاده از ;position: absolute است :

<html>

<head>

<style>

.right {

    position: absolute;

    right: 0px;

    width: 300px;

    border:3px solid #8AC007;

    padding: 10px;

}

</style>

</head>

<body>


<div class="right">

  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>

</div>


</body>

</html>

 

عناصری که به صورت مطلق موقعیت دهی میشوند از جریان عادی صفحه جدا میشوند و میتوانند با عناصر دیگر تداخل داشته باشند.

هنگامی که عناصر را با position ترازبندی میکنید، همیشه برای عنصر <body>، ویژگی padding و margin را تعریف کنید. اینکار از تفاوتهای ظاهری در مرورگرهای مختلف جلوگیری میکند.

<html>

<head>

<style>

body {

    margin: 0;

    padding: 0;

}


.container {

    position: relative;

    width: 100%;

}


.right {

    position: absolute;

    right: 0px;

    width: 300px;

    background-color: #b0e0e6;

}

</style>

</head>

<body>


<div class="container">

  <div class="right">

    <p> عناصری که به صورت مطلق موقعیت دهی میشوند از جریان عادی صفحه جدا میشوند و میتوانند با عناصر دیگر تداخل داشته باشند.

</p>

  </div>

</div>


</body>

</html>

 

ترازبندی چپ و راست با استفاده از ویژگی float

روش دیگری که برای ترازبندی عناصر استفاده میشود، ویژگی float است:

<html>

<head>

<style>

.right {

    float: right;

    width: 300px;

    border:3px solid #8AC007;

    padding: 10px;

}

</style>

</head>

<body>


<div class="right">

  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>

</div>


</body>

</html>

 

هنگامی که عناصر را با ویژگی float ترازبندی میکنید، همیشه برای عنصر <body>، ویژگی padding و margin را تعریف کنید. اینکار از تفاوتهای ظاهری در مرورگرهای مختلف جلوگیری میکند.

دیدگاه‌ها

هی بد نبود

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.