কিভাবে CSS/এইচটিএমএল একে অপরের পাশে দুটি ছবি কেন্দ্রীভূত করতে

আমি এইচটিএমএল এবং CSS তে মোটামুটি নতুন, এবং আমি পর্দার কেন্দ্রস্থলে পাশাপাশি দুটি চিত্র পাশ করার চেষ্টা করছিলাম (স্ক্রীনটি যখন স্কিল করা হয় তখন স্বয়ংক্রিয়ভাবে নিজেকে শক্তিশালী করে)।

আমি কেবলমাত্র দুটি ছবিতে একে অপরের পাশে যেতে সক্ষম হচ্ছি এবং তাদের কেন্দ্র করতে সক্ষম হব না বা তাদের স্বয়ংক্রিয়ভাবে স্কেল করতে সক্ষম হব না। আমি কেন্দ্রে যেতে তাদের অন্য কোন কোড দিয়ে পরিচালনা করলাম কিন্তু ছবিগুলি খুব ছোট ছিল এবং আমি নিজেকে বড় করতে পারিনি।

<head>
</head>
<body>

<div class="row">
  <div class="column">
    Snow
  </div>
  <div class="column">
    Forest
  </div>
  <div class="column">
    Mountains
  </div>
</div>

</body>
</html>

The two images should go next to each other in the centre of the screen, scaling themselves on different sized browser windows and when browser is zoomed in or out. I should be able to change the size of the images to what I need.

1
আমি CSS এ একটি ধারক ভিতরে divs "> stackoverflow.com/questions/17188455/… জর্জ থেকে উত্তরটি চেক করুন
যোগ লেখক Masih Ansari, উৎস

5 উত্তর

Here is a way to do it with flexbox

JSFiddle ডেমো এখানে

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

* {
  height: 100%;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
  padding: 0 200px;
}

@media screen and (max-width: 768px) {
  .images {
    flex-direction: column;
    padding: 0;
  }
}
<div class="images">
  
  
</div>
</div> </div>
0
যোগ

আপনার CSS মধ্যে কোড নিচে ব্যবহার করুন।

OR You can use flex. check below link. https://www.w3schools.com/cssref/css3_pr_justify-content.asp

.row {প্রস্থ: 80%; মার্জিন: 0 অটো; }

0
যোগ

সারি উপাদান ফ্লেক্স ব্যবহার করে দেখুন

.row {   
    display: flex;
    justify-content: center;
    align-items: center;
}
0
যোগ

নিম্নলিখিত সিএসএস যোগ করুন

body
{
text-align:center;
}

.row
{
display:inline-block;
}
0
যোগ

আমি আশা করি এটা তোমাকে সাহায্য করবে।

<html>


 <head>
      
   </head>
   <body>
      
  • Snow
  • Snow
   </body>
</html>
0
যোগ
এই সমাধান প্রশ্নের উত্তর কেন ব্যাখ্যা করার জন্য সময় নিন। আমরা মানুষকে শিক্ষিত করতে এখানে এসেছি, শুধু তাদের কাছে অযৌক্তিক কোড নিক্ষেপ করি না।
যোগ লেখক James Whiteley, উৎস