سلام کاربران عزیز ، حال شما چطور است؟ خوب هستید؟ سلامت و شاد هستید؟ انشا.. که این چنین باشید. درمورد سی اس اس مطلبی میخووام بزارم ، درمورد وسط چین کردن متن به صورت عمودی در css توضیح میدم.لطفا باما همراه باشید..
بعضی وقت ها پیش می آید که می خواهیم متنی را به صورتی عمودی (vertical) در یک المان وسط چین کنیم. وسط چین کردن به صورت افقی به راحتی و با کمک خصوصیت text-align به صورت زیر انجام می شود:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
<!DOCTYPE html>
<html>
<head>
<title>CSS Line-Height</title>
<style>
.link {
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
color: white;
background-color: darkred;
}
</style>
</head>
<body>
<a href=”#” class=”link”>My Link</a>
</body>
</html>
برای وسط چین کردن متن به صورت vertical کافیست مقدار line-height را برابر با ارتفاع مشخص شده المان قرار دهیم:
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
<!DOCTYPE html>
<html>
<head>
<title>CSS Line-Height</title>
<style>
.link {
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
color: white;
background-color: darkred;
line-height: 150px;
}
</style>
</head>
<body>
<a href=”#” class=”link”>My Link</a>
</body>
</html>
خصوصیت line-height در حقیقت ارتفاع قبل و بعد از متن را به میزان نصف مقدار مشخص شده ست می کند و همین موضوع باعث می شود که متن در وسط المان قرار بگیرد.
