صفحه اصلی / آموزش CSS / بخش بیست و چهارم- آموزش تراز افقی و عمودی در css

بخش بیست و چهارم- آموزش تراز افقی و عمودی در css

قدم قبلی > < قدم بعدی

بخش بیست و چهارم- آموزش تراز افقی و عمودی در css

 

چیدمان CSS – تراز افقی و عمودی

تراز کردن عناصرمرکزی 

برای قرار دادن یک عنصر بلوک به صورت افقی (مانند <div>)، از حاشیه: auto استفاده کنید.

تنظیم عرض عنصر، از به بیرون کشیده شدن لبه های ظرف آن جلوگیری می کند.

سپس عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین دو حاشیه تقسیم می شود:

به این مثال توجه کنید:

<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

 

نکته: اگر مقدار عرض مشخص نشده باشد تراز کردن مرکز تاثیری ندارد (یا به ۱۰۰٪ تنظیم شده باشد).

تراز کردن متن در مرکز

برای متمرکز کردن متن درون عنصر، از text-align استفاده کنید: center؛

مثال:

<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>

نکته: برای نمونه های بیشتر در مورد چگونگی تراز کردن متن، فصل Text CSS را ببینید.

در مرکز قرار دادن تصویر

برای قرار دادن یک تصویر، حاشیه چپ و راست را روی خودکار قرار دهید و آن را به عنصر بلوک تبدیل کنید:

مثال:

<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="http://tiktheme.com/paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

 

هماهنگی چپ و راست – با استفاده از موقعیت
یک روش برای تراز کردن عناصر، استفاده از موقعیت است: مطلق؛

در سال های جوانتر و آسیب پذیرتر، پدرم بعضی از توصیه هایی را که من از آن در ذهنم داشت، به من داد.

مثال:

<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>

<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>

 

توجه: عناصر موضعی مطلق از جریان طبیعی حذف می شوند و می توانند عناصر را همپوشانی کنند.

چپ و راست راست – با استفاده از شناور
روش دیگری برای تراز کردن عناصر استفاده از مالکیت شناور است:

مثال:

<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the float property:</p>

<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>

 

نکته: اگر عنصر بلندتر از عنصر حاوی آن باشد، و آن شناور است، در خارج از ظرف آن سرریز می شود. شما می توانید هشدار “clearfix” را برای رفع آن (از مثال زیر استفاده کنید) استفاده کنید.

Hack Clearfix
بدون Clearfix

با Clearfix

سپس می توانیم سرریز را اضافه کنیم: auto؛ به عنصر حاوی این مشکل رفع:

مثال:

<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="http://tiktheme.com/pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="http://tiktheme.com/pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

 

مرکز به صورت عمودی – با استفاده از پوشش
روش های بسیاری برای مرکب کردن عنصر به صورت عمودی در CSS وجود دارد. یک راه حل ساده استفاده از پد بالا و پایین است:

من عمودی هستم

مثال:

<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

 

برای تمرکز هر دو به صورت عمودی و افقی، از پد و متن استفاده کنید: مرکز:

مثال:

<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

 

مرکز عمودی – استفاده از خط ارتفاع
یک ترفند دیگر این است که از ویژگی ارتفاع خط با مقدار برابر با ویژگی ارتفاع استفاده کنید.

من عمودی و افقی محور هستم
مثال:

<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use padding and text-align to center the div element vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

 

/ * اگر متن دارای چندین خط باشد، موارد زیر را اضافه کنید: * /
.center p {
خط ارتفاع: ۱٫۵؛
نمایش: inline-block؛
عمودی تراز: وسط؛
}
مرکز عمودی – با استفاده از موقعیت و تبدیل
اگر خطوط و خط ارتفاع گزینه ها نیستند، راه حل سوم این است که از موقعیت و ویژگی تبدیل استفاده کنید:

گام قبلی > < گام بعدی

نوشته بخش بیست و چهارم- آموزش تراز افقی و عمودی در css اولین بار در تیک تم. پدیدار شد.


منبع مطلب

این مطالب را نیز ببینید!

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

  آموزش ساخت جدول در CSS   ساخت جدول در CSS برای شروع و قبل …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *