এইচটিএমএল -এ কীভাবে একটি চিত্রকে কেন্দ্র করবেন

লেখক: Mark Sanchez
সৃষ্টির তারিখ: 6 জানুয়ারি 2021
আপডেটের তারিখ: 1 জুলাই 2024
Anonim
কীভাবে একটি চিত্রকে অনুভূমিকভাবে কেন্দ্রীভূত করবেন (সিএসএস এবং এইচটিএমএল টিউটোরিয়াল)
ভিডিও: কীভাবে একটি চিত্রকে অনুভূমিকভাবে কেন্দ্রীভূত করবেন (সিএসএস এবং এইচটিএমএল টিউটোরিয়াল)

কন্টেন্ট

গুণ সারিবদ্ধ ট্যাগ html> HTML5 থেকে অপ্রচলিত হয়েছে। যদিও এই বৈশিষ্ট্যটি এখনও বেশিরভাগ ওয়েব ব্রাউজারে কাজ করে, এটি সুপারিশ করা হয় যে আপনি ক্যাসকেডিং স্টাইল শীট (CSS) ব্যবহার করে ছবিগুলি সারিবদ্ধ করুন। এই প্রবন্ধে, আমরা আপনাকে দেখাবো কিভাবে CSS এবং অপ্রচলিত ট্যাগ ব্যবহার করে ছবিগুলি কেন্দ্রীভূত করা যায়। সারিবদ্ধ.

ধাপ

2 এর 1 পদ্ধতি: CSS (প্রস্তাবিত)

  1. 1 ছবির জন্য HTML কোড যোগ করুন। আপনি ছবিটি সারিবদ্ধ করার জন্য ক্যাসকেডিং স্টাইল শীট (CSS) ব্যবহার করবেন, কিন্তু আপনাকে HTML ব্যবহার করে পৃষ্ঠায় এটি স্থাপন করতে হবে। ট্যাগ ব্যবহারের একটি উদাহরণ নিচে দেওয়া হল img> আপনার কোডে একটি ছবি toোকানোর জন্য:

    img src = "dog.webp" alt = "এটি একটি কুকুরের ছবি">

    • পরিবর্তে dog.webp ইমেজ ফাইলের নাম প্রতিস্থাপন করুন, এবং "alt" এর পরে ছবির বর্ণনা লিখুন। অর্থ কেন্দ্র "ক্লাস" এর জন্য পরিবর্তন করবেন না, কারণ আপনি সেই নাম দিয়ে একটি CSS ক্লাস তৈরি করবেন।
  2. 2 সিএসএস কোড খুঁজুন। যদি আপনার সাইটে একটি আলাদা CSS ফাইল থাকে, তাহলে এটি খুলুন। যদি না হয়, CSS সম্ভবত HTML ফাইলের শীর্ষে, ট্যাগের ভিতরে মাথা>... ট্যাগ খুঁজে পেতে ফাইলের শীর্ষে স্ক্রোল করুন < / style>.
    • যদি ট্যাগ হয় < / style> না, তাদের যোগ করুন। আরও তথ্যের জন্য এই নিবন্ধটি পড়ুন।
  3. 3 ছবিটি সারিবদ্ধ করতে CSS যোগ করুন। "50%" এর পরিবর্তে, পৃষ্ঠায় ছবিটি প্রদর্শিত করার জন্য আপনি একটি ভিন্ন মান লিখতে পারেন। আপনি "100%" মান দিয়ে ছবিটিকে কেন্দ্র করতে পারবেন না, তাই এই সংখ্যাটি ভিন্ন হওয়া উচিত।

    .center {display: block; মার্জিন-বাম: স্বয়ংক্রিয়; মার্জিন-ডান: অটো; প্রস্থ: 50%; }

  4. 4 আপনার পরিবর্তনগুলি সংরক্ষণ করুন। HTML ফাইল এবং CSS ফাইল (যদি থাকে) সংরক্ষণ করুন। এটি ছবিটিকে কেন্দ্র করবে।
    • এছাড়াও ট্যাগের ভিতরে img> যোগ করতে পারেন অন্যান্য ছবি কেন্দ্রীভূত করার জন্য।

2 এর পদ্ধতি 2: এইচটিএমএলে "সারিবদ্ধ" বৈশিষ্ট্য

  1. 1 একটি নতুন অনুচ্ছেদ তৈরি করুন। যদিও ছবিগুলি কেন্দ্রীভূত করার এই পদ্ধতিটি বাতিল করা হয়েছে, এটি এখনও অনেক ব্রাউজারে কাজ করে। যাইহোক, আমরা সাইটকে কার্যকরী রাখার জন্য CSS ব্যবহার করার পরামর্শ দিই যখন ব্রাউজার নির্দিষ্ট বৈশিষ্ট্যের সমর্থন বন্ধ করে। মনে রাখবেন যে বৈশিষ্ট্য সারিবদ্ধ ছবিটি শুধুমাত্র চারপাশের উপাদানটির মধ্যে কেন্দ্রীভূত করবে (উদাহরণস্বরূপ, ট্যাগের ভিতরে p> </p> অথবা div> </div>)। উদাহরণস্বরূপ, HTML ফাইলে, আমরা যোগ করে একটি নতুন অনুচ্ছেদ তৈরি করব p> একটি পৃথক লাইনে।
  2. 2 ছবির জন্য HTML কোড যোগ করুন। ট্যাগের পর নিচের কোডটি লিখুন p>... একটি গাইড হিসাবে এই উদাহরণ ব্যবহার করুন:

    p> img src = "dog.webp" alt = "picture" align = "middle">

    • পরিবর্তে dog.webp ইমেজ ফাইলের নাম প্রতিস্থাপন করুন, এবং "alt" এর পরে ছবির বর্ণনা লিখুন।
    • মধ্যম বৈশিষ্ট্য ব্রাউজারকে পৃষ্ঠার কেন্দ্রে ছবি প্রদর্শন করতে বলে।
  3. 3 অনুচ্ছেদ ট্যাগ বন্ধ করুন। এটি করার জন্য, যোগ করুন / p> ছবির ট্যাগের পরে। সমাপ্ত কোডটি এরকম কিছু হওয়া উচিত:

    p> img src = "dog.webp" alt = "picture" align = "middle"> </p>

  4. 4 আপনার পরিবর্তনগুলি সংরক্ষণ করুন। এটি ছবিটিকে কেন্দ্র করবে।