ایجاد شده در ۲۴ شهریور ۱۴۰۱
موضوع : وسط انداختن عنصر از لحاظ افقی و عمودی بصورت داینامیک بدون استفاده از margin یا padding
سلام وقت بخیر
چه جوری میشه یه عنصر یا متن رو بدون margin یا padding که خودمون دستی مقدار بدیم یا ترازش کنیم... وسط انداخت؟
من جستجو کردم و متوجه نشدم کد چی میگه ولی عمل میکنه
html>
<html>
<head>
<style>
.MyBox{
transform: translate(-50%, -50%);
position: absolute;
right: 50%;
left:50%;
top:50%;
bottom:50%;
width:100px;
height:50px;
background-color:#FF5722;
border:3px solid black;
}
style>
head>
<body>
<br><br>
<div class="MyBox">div>
body>
html>
همچنین برای اینکه یه عنصر داخل عنصر دیگه وسط باشه از همه جهات این کد رو پیدا کردم:
<style>
.test2 {
/* margin-right: 10px; */
text-align: center;
width: 300px;
height: 300px;
background-color: red;
border-radius: 0;
box-shadow: none;
color: #ebebeb;
position: relative;
}
.test2 p{
margin: 0;
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
style>
<body>
<div class="test2"> <p>warning!p> div>
body>
ممنون میشم توضیح بدید بیشتر ویژگی transform و دلیل position دادن رو نفهمیدم