ورود

View Full Version : وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است



shahin53
سه شنبه 06 شهریور 1397, 16:03 عصر
سلام دوستان خسته نباشید
ببخشید یک سوال داشتم:


من یک div دارم که ارتفاع آن ۴۰۰ پیکسل است و درون این div دو div دیگر دارم که درون دومین div یک متن قرار دارد که میخواهم این متن هم به صورت عمودی هم افقی

در مرکز قرار بگیرد. برای وسط چین افقی مشکلی ندارم اما نمی دونم چطور میتونم عمودی هم راست چین کنم.

خب البته من میتونم margin-top بهش بدم اما به نظرم میاید این روش راه درستی نیست . چون برای رسپانسیو کردن سایت مشکل درست می کنه
این کد منه
ممکنه اگه زحمتی نیست راهنمایی بفرمایید:



<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css" media="screen">
.parent{
height: 400px;
border: solid blue;
}
.put-me-center{
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">
با من کاری نداشته باش من نمی خواهم وسط باشم
</div>
<div class="put-me-center">
<span>
مرا هم عمودی هم افقی در وسط بگذار

</span>
</div>
</div>
</body>
</html>


همان طور که میبینید من سعی کرده ام با vertival-align وسط چین عمودی می کنم اما نتوانسته ام
خیلی ممنون میشوم راهنمایی بفرمایید

anvar
سه شنبه 06 شهریور 1397, 16:52 عصر
یه راهش اینه که به کنترل ظرف با کلاس put-me-center زیر رو بدی
line-height: 400px;

راه دوم هم اینه که متن رو از span در بیار (span رو کامل پاک کن) و در داخل یک div بذار که اسمش رو میذارم Div فرزند ()

به کلاس put-me-center خاصیت های زیر رو بده (قواعد css قبلی این کنترل رو کامل پاک کن)
position: relative;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;

به Div فرزند هم خاصیت های زیر رو
text-align: center !important;
vertical-align: middle !important;
position: relative;
display: table-cell;
float: none;

marasiali
سه شنبه 06 شهریور 1397, 20:02 عصر
سلام.یه راه دیگه هم هست که والدشو پوزیشن relative بدی بعد به متن پوزیشن absolute بدی.و از بالا ۵۰% فاصله بدی بعد با transform خاصیت translate به اندازه ۵۰% ارتفاع عنصر برش گردونی بالا.
اینجوری:
https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform

y_dehghan
دوشنبه 12 شهریور 1397, 16:57 عصر
همانطور که دوستمون در بالا گفتم از position باید استفاده کنی، شاید لینک زیر به دردت بخوره
https://www.datadars.com/css/css-introduction/css-positioning/