وسط چین کردن تصاویر سایت

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

قرار گرفتن تصاویر در وسط صفحه

قرار گرفتن عکس ها در وسط صفحه و div

به گمانم تمام ادیتور های سیستم های مدیریت محتوا امکان تعیین محل قرار گفتن عکس ها مثلا در وسط ، سمت چپ یا سمت راست قالب رو با عناوینی تحت عنوان Align right , Align center , Align left در اختیار شما قرار میدن.اما گاها پیش میاد که ما فراموش می کنیم تا محل مناسب عکس ها رو انتخاب و اونها رو وسط چین کنیم یا بعضا دیده شده مثلا در وردپرس افراد شکایت از کار نکردن گزینه چیدمان تصاویر دارند و تصاویر در وردپرس بعد از اینکه روی میانه قرار میگیرند ولی باز هم سمت راست نمایش داده میشند .برای همین یک کد خیلی ساده خدمتتون معرفی می کنیم تا برای همیشه این مشکل قرار گرفتن تصاویر رو برطرف کنیم و یک جایگاه همیشگی در وسط صفحه یا همون div نوشتارمون حتی بدون انجام تنظیمات رو به تصاویر بدیم.

برای این کار فقط نیاز هستش تا div مورد نظر خودتونو پیدا کنید و در فایل style.css با اضافه کردن یک img به اون div و بقیه مقادیری که در پایین مشاهده می کنید، محل میانه و وسط رو برای تصاویر خودتون قرار بدید.مثل کدهای زیر…

#single img {
display: block;
margin-left: auto;
margin-right: auto;
clear: both;
}

دقت کنید به عنوان مثال div مود نظر ما که مطالب سایت داخلش نمایش داده میشن رو single انتخاب کردیم ، شما باید بگردید و div خودتونو پیدا کنید و بجای این single که ما گذاشتیم قرار بدید ، و سپس می بینید که یک img بهش اضافه شده ( یعنی با این کد میگیم منظور ما تصاویر داخل این div هستش ) . شما بعد از قرار دادن div خودتون بجای single ، کدها رو به فایل style.css قالب اضافه کنید .

پیدا کردن div مورد نظر برای وسط چین شدن تصاویر

اگر یکخورده آشنا نیستید به این div که در بالا ذکر کردیم و می بایست div مورد نظر خودتونو پیدا میکردید ، در مطالب قبلی سایت آموزش inspect element گوگل کروم و همچنین مطالب کاملا مشابهی شبیه این مطلب استایل کادر و چرخش تصاویر سایت ، استایل چرخش ۳۶۰ درجه تصاویر رو توضیح داده بودیم که مراحلی مشابه و عین همین مطلب بالا داره ، که از اونها می تونید کمک بگیرید .

باز اگر جایی ابهامی وجود داشت در قسمت دیدگاه ها در خدمت شما هستیم و خوشحال میشیم نظرات خودتونم در مورد سایت بشنویم ، یا حق

17 نظرات
  1. حسین می گوید

    سلام. اگه بخواهیم آرم لوگوی ساماندهی که در فوتر صفحه ی اصلی هست رو وسط بیارم، از چه کدی و داخل چه فایلی باید استفاده کنم؟

    1. آرش حیدری می گوید

      سلام
      نیاز به آشنایی و استفاده از css هستش

  2. روح الله می گوید

    عالی بود
    مررررررررسی

  3. طراحی سایت تفریحی می گوید

    عالی بود
    هر چند فکر نمی کنم نظرم تایید بشه چون این مطلب خیلی قدیمیه

  4. رضا می گوید

    سلام
    ببخشید با این کد که همه تصاویر فقط و فقط در وسط قرار میگیرند. درسته؟
    اگر بخواهیم که تصاویر در جاهای مختلف مثل چپ یا راست و یا متن در چپ و یا ….
    از چه کدی میشه استفاده کرد

  5. اشکان می گوید

    آقا آرش .. این قسمت کد های دیو

    span.wpcf7-list-item{margin-left:0;margin-right:0.5em;}
    div.wpcf7{margin:0;padding:0;font:12px Yekan, tahoma;}
    div.wpcf7-response-output{margin:2em 0.5em 1em;padding:0.2em 1em;}
    div.wpcf7-mail-sent-ok{border:#1191d3 solid 2px;}
    div.wpcf7-mail-sent-ng{border:#e94f2e solid 2px;}
    div.wpcf7-spam-blocked{border:#ffa500 solid 2px;}
    div.wpcf7-validation-errors{border:#e94f2e solid 2px;}
    span.wpcf7-form-control-wrap{position:relative;}
    span.wpcf7-not-valid-tip{position:absolute;top:20%;left:20%;z-index:100;background:#fff;border:#e94f2e solid 1px;font-size:10pt;width:280px;padding:2px;}
    span.wpcf7-not-valid-tip-no-ajax{color:#f00;font-size:10pt;display:block;}
    span.wpcf7-list-item{margin-left:0.5em;}
    .wpcf7-display-none{display:none;}
    div.wpcf7 img.ajax-loader{border:none;vertical-align:middle;margin-left:4px;}
    div.wpcf7 .watermark{color:#888;}
    @media screen and (max-width:1210px){.main, .header{width:99%}
    .rightsidebar{width:18%}

    چیکار باید بکنم ؟ ممنون میشم راهنمایی کنید :-)

  6. اشکان می گوید

    سلام, همدردیم علی منم این مشکل رو دارم و منظور آقا آرش رو از دیو نمیدونم کجاست و یعنی چی ؟

  7. حامد می گوید

    عالی بود ممنون.

  8. محمد جواد یزدانی می گوید

    متشکرم از این سایت پر محتواتون
    خدا خیرت بده

  9. علی می گوید

    سلام ,

    خسته نباشید سایتتون فوق العاده هست ,

    من منظورتون رو از div مورد نظرتون رو پیدا کنید متوجه نشدم و نمی تونم پیدا کنم ..

  10. بلیان می گوید

    ممنون

  11. ساسان می گوید

    کارت عالیه ممنون استفاده کردم

  12. هتل درویشی می گوید

    سپاسگذارم . عالی بود

  13. آریا می گوید

    سلام.
    خیلی ممنون از سایت خوبتون.
    یه خواهش داشتم.
    امکانش هست درگاه بانک ملت رو برای افزونه Paid Download هم قرار بدید؟؟
    چون اکثرا از این استفاده میکنن و بخوان تغییر بدن کلی مطالب رو باید ویرایش کرد.

    1. آرش حیدری می گوید

      سلام
      من تا جایی که بتونم پلاگین های کاربردی ارائه میدم اما خوب زمان بر هستش.
      اگر درگاه بانک ملت دارید ، من درگاه بانک ملت رو برای EDD در مخرن وردپرس قرار دادم می تونید ازش استفاده کنید .

      1. آریا می گوید

        ممنونم ازتون. آقای حیدری.
        واقعا خسته نباشید داره برای سایت خوبتون.
        بهتون ایمیل دادم، ممنون میشم وقت داشتید جواب بدید.

  14. افزایش لایک می گوید

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.