استایل دادن به لینک ها
استایل دادن به لینک ها
05/12/1395
Microdata در بالا بردن سئو
Microdata در بالا بردن سئو
06/12/1395
نمایش همه

چینش افقی متن

چینش افقی متن

نحوه چینش افقی متن

شما میتوانید با استفاده از گزینه Align متن های سند HTML را از حالت چپ چین، راست چیت با وسط چین کنید. بعضی از عنصرهای Block هستند به صورتی که کلیه عرض فضای افقی که در آن موجود است را اشغال میکنند و همینطور از نظر عمودی هم به اندازه یک خط از بالا و یک خط از پایین فضا را میگیرند. شما در این مقاله نحوه چینش افقی متن را فرا میگیرید. اینگونه چینش میتواند در طراحی سایت شما تاثیر کذار باشد. شما میتوانید هنگام طراحی وب سایت از این خاصیت ها برای جلوه بهتر استفاده کنید.

چینش افقی متن

آموزش align کردن بوسیله margin :

عنصر های block را می توان بوسیله margin وسط قرار داد. به صورتی که با قرار دادن margin-right و margin-left به شکل auto عنصر block از نظر افقی وسط قرار می گیرد. توجه داشته باشید که این موضوع بوسیله IE8 و ماقبل ساپورت نمی شود مگر آنکه از <DOCTYPE html!> استفاده کنید به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
</style>
</head>
<body>

<div class=”center”>
<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>
<p>’Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.'</p>
</div>

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

</body>
</html>

چینش افقی متن

ردیف کردن از چپ یا راست با استفاده از position که یکی از متد های استفاده از ;position: absolute می باشد. همانند زیر :

<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</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>
<p>’Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.'</p>
</div>
</body>
</html>

چینش افقی متن

یک پیش تعریف در آن را قرار دهید تا در Browser های متفاوت یکی نشان داده شود. زمانی که از Position استفاده میکنید یک مشکل در Browser های ie8 و قبل از آن ایجاد میشود . هنگامی که شما یک عنصر به همراه width را برای ظرفی برای قرار دادندیگر عنصر ها تعریف میکنید. و از گذاشتن !DOCTYPE را فراموش میکنید. Ie8 و ما قبل به طور دیفالت ۱۷px از سمت راست margin میکند که موجب ایجاد یک اسکرول افقی میشود. فراموش نکنید زمانی که از Position استفاده میکنید، حتما !DOCTYPE را در داخل سند قرار دهید.

چینش افقی متن

ردیف کردن از راست و چپ با استفاده از خاصیت float :
یکی از روش ها برای انجام این کار استفاده کردن از خاصیت float می باشد که این خاصیت می تواند مقادیر right و left را بپذیرد. همانند زیر :

<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</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>
<p>’Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.'</p>
</div>
</body>
</html>

چینش افقی متن

موارد مربوط به سازگاری مرورگر ها Crossbrowser compatibility :

زمانی که عنصرها را در منار یکدیگر ردیف میکنید، برای جلوگیری کردن از اختلاف بصری در Browser های گوناگون؛ میبایست یک پیش تعریف در آن قرار دهید تا در Browser های متفاوت به یک شکل دیده وشد. زمانی که از Float استفاده میکنید و DCTYPE را فراموش میکنید Ie8 و ما قبل به طور دیفالت از سمت راست Margin میشو که موحب ایجاد اسکرول افقی میشود. فراموش نکنید زمانی که از Float استفاده میکنید DOCTYPE را در سند وارد کنید همانند مثال زیر :

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class=”right”>
<p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</body>
</html>