• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
چطور می توانم یک المان در مرکز صفحه قرار دهم
#1
سلام
خسته نباشید

سوالی از حضورتون داشتم اگر لطف کرده راهنمایی کنید ممنون میشم

من میخام یک کار ساده و خیلی اولیه در css انجام بدم از عهدش برنمیام.

من یک صفحه ی html دارم که فقط یک عکس درون اون قرار داره کاری که من میخام بکنم این است که این عکس درست در مرکز صفحه قرار بگیره.
سرچ هایی که کردم میگفت باید مارجین رو روی اتوماتیک قرار بدم اما این کارو کردم با این حال عکس در وسط صفحه قرار نگرفته.

من میخام عکس هم از نظر عرض و هم از نظر ارتفاع در صفحه باشه و الا من میدونم که میتونم با قرار text-align برابر center عکس رو به وسط صفحه بیارم . این هم نمونه کد من است که نوشتم:


کد:
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<style type="text/css">

.im{
        margin: auto;
            border: 5px solid red;
            align-items: center;
            text-align: center;
}

</style>


<body>




<div class="im">
    <img src="1.jpg" alt="" width="200" height="200">
</div>



</body>
</html>


ممنون میشم اگه راهنمایی کنید
  پاسخ
تشکر شده توسط :
#2
کد پی‌اچ‌پی:
<!DOCTYPE html>
<
html>
<
head>
  <
title></title>
</
head>

<
style type="text/css">

.
im{
        
marginauto;
        
border5px solid red;
        
align-itemscenter;
        
text-aligncenter;
}

</
style>


<
body>




<
div class="im">
    <
img src="http://meysam.biz/uploads/blog/07-install-lamp-0.png" alt="" width="200" height="200">
</
div>



</
body>
</
html

کدتون درسته من با یه عکس تست کردم درست کار میکرد. احتمالا آدرس عکس رو اشتباه دادید
میثم محمودی | انجمن کد ایگنایتر فارسی
--------------------------
هرگز نمي توان با آدمهاي کوچک کارهاي بزرگ انجام داد
  پاسخ
تشکر شده توسط : ayoubsys
#3
کد:
<!DOCTYPE html>
<html>
<head>
    <title>Centered</title>

    <style type="text/css">
        .im {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="im">
        <img src="http://meysam.biz/uploads/blog/07-install-lamp-0.png" alt="" width="200" height="200">
    </div>
</body>
</html>
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : Alaa ayoubsys


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان