একটি ডিভের মধ্যে অনুভূমিকভাবে চিত্র কেন্দ্র করুন

Question

এটি সম্ভবত একটি মূ .় প্রশ্ন তবে কোনও চিত্রের সারিবদ্ধকরণের কেন্দ্রিক পদ্ধতিগুলি যেহেতু কাজ করছে না আমি ভেবেছিলাম জিজ্ঞাসা করব। আমি কীভাবে তার ধারক ডিভের অভ্যন্তরে কোনও চিত্র সারিবদ্ধ (অনুভূমিকভাবে) কেন্দ্র করতে পারি?

এইচটিএমএল এবং সিএসএস এখানে। আমি থাম্বনেইলের অন্যান্য উপাদানগুলির জন্য সিএসএসও অন্তর্ভুক্ত করেছি। এটি অবতরণ ক্রমে চলে তাই সর্বোচ্চ উপাদানটি হ'ল সবকিছুর ধারক এবং সর্বনিম্ন প্রতিটি জিনিসের অভ্যন্তরে।

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

ঠিক আছে, আমি পিএইচপি ছাড়াই মার্কআপ যুক্ত করেছি তাই দেখতে আরও সহজ হওয়া উচিত। উভয়ই সমাধান অনুশীলনে কার্যকর বলে মনে হচ্ছে না। শীর্ষে এবং নীচে পাঠ্যটি কেন্দ্রিক করা যায় না এবং চিত্রটি তার ধারক ডিভের মধ্যে কেন্দ্রীভূত করা উচিত। কনটেইনারটি ওভারফ্লো লুকিয়ে রয়েছে তাই আমি ফোকাসটি সাধারণত যেখানে থাকি তেমনভাবে চিত্রের কেন্দ্র দেখতে চাই।

Comments

এটি কি উদ্দেশ্যযুক্ত যে চিত্রটি প্রথম লিঙ্কের (একইভাবে শিল্পীটির) একই লাইনে প্রদর্শিত হবে?

— শোয়েব

imgএগুলি পরিবর্তিত text-align: centerনা হলে এগুলি সাপেক্ষে display।

— জারেড ফারিশ

jsfiddle.net/cEgRp - সহজtext-align: center

— জোল্টন টথ

জ্যাকব, আপনি কি পিএইচপি-ইনফিউজড টেম্পলেটটি না দেখে ব্রাউজারটি দেখে নিখুঁতভাবে মার্কআপ আপ পোস্ট করতে পারেন? এছাড়াও, একটি কার্যকরী jsfiddle.net সর্বদা সহায়তা করে।

— জারেড ফারিশ

আমার মন্তব্যে কিছু মনে করবেন না - আমি মনে করি না যে imgএটির মধ্যে আবদ্ধ ছিল a। আমি বকা.

— শোয়েব

Answer 1

সিএসএস গাই নিম্নলিখিত পরামর্শ দেয়:

সুতরাং, অনুবাদ করা, সম্ভবত:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

এখানে আমার সমাধানটি এখানে: http://jsfiddle.net/marvo/3k3CC/2/

Comments

আমি এটি একটি ভাল ধারণা বলে মনে করি না, এবং আমি বিশ্বাস করি যে এর মতো কিছু সতর্কতামূলক margin: autoএকটি নির্দিষ্ট প্রস্থের মানযুক্ত উপাদানটির উপর নির্ভরশীল।

— জারেড ফারিশ

আমি এখনও আমার সিএসএস দক্ষতা উন্নতি করছি, তাই আকর্ষণীয় অধ্যয়ন বিন্দু জন্য ধন্যবাদ। তবে এক্ষেত্রে তিনি ধারকটিতে একটি নির্দিষ্ট প্রস্থ ব্যবহার করছেন।

— মারভো

এই প্রসঙ্গে মনোনীত প্রস্থটি ঠিক কী বোঝায়? অবশ্যই দরকারী জ্ঞানের মত মনে হয়।

— শোয়েব

আমি তৈরি এই ঝাঁকুনি দেখুন ; আমি কী ভাবব তা নিশ্চিত নই। আপনি যা পরামর্শ দিচ্ছেন তা কিছুই করবে না এবং imgআমি বিশ্বাস করি যে এর কোনও প্রভাব ফেলতে কোনওভাবেই প্রস্থের সংজ্ঞা দেওয়া দরকার auto।

— জারেড ফারিশ

আপনি যে সমাধানটি উপস্থাপন করেছেন তা আপনি বাস্তবে কার্যকর করেন নি। দ্বিতীয়ত, বেষ্টনকারী ডিভটির প্রস্থটি 120px রয়েছে যা চিত্রের প্রস্থের প্রায় একই, এটি চিত্রটিকে আসলে কেন্দ্রীভূত করছে কিনা তা দেখা শক্ত করে তোলে। : এখানে আমার সমাধান jsfiddle.net/marvo/3k3CC/2

— Marvo

Answer 2

সিএসএস ফ্লেক্সবক্সটিjustify-content: center চিত্রের মূল উপাদানটিতে এটি করতে পারে । চিত্রটির দিক অনুপাত সংরক্ষণ align-self: flex-start;করতে এটিতে যুক্ত করুন।

এইচটিএমএল

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

সিএসএস

.image-container {
  display: flex;
  justify-content: center;
}

আউটপুট:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Comments

যখন ব্রাউজার এটি সমর্থন করে তখন দুর্দান্ত সমাধান। align-itemsউল্লম্বভাবে কেন্দ্রে ব্যবহার করতে পারেন । বিভিন্ন মার্জিন সমাধানগুলি আমার পক্ষে কাজ করে না কারণ কেন্দ্রীভূত করা উপাদানটির প্রস্থ এবং উচ্চতার বৈশিষ্ট্য নেই।

— মার্ক রোচকাইন্ড

আমার ক্ষেত্রে, ডিভের একটি নির্দিষ্ট আকার রয়েছে (উদাহরণস্বরূপ 50px) এবং এটি চিত্রটি 50px এ প্রসারিত করবে।

— সর্বাধিক

@Max যে ক্ষেত্রে, আপনি আবেদন করতে পারেন align-selfএই মত ইমেজ উপাদানে jsfiddle.net/3fgvkurd

— মনোজ কুমার

Answer 3

আমি কেবল ডাব্লু 3 সিএসএস পৃষ্ঠায় নীচে এই সমাধানটি পেয়েছি এবং এটি আমার সমস্যার উত্তর দিয়েছে।

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

সূত্র: http://www.w3.org/Style/Example/007/center.en.html

Comments

আমি max-width: 100%; max-height: 100%;চিত্রটির চেয়ে পর্দা ছোট হলে চিত্রটির আকার পরিবর্তন করতে ব্যবহার করছি , তবে এই ক্ষেত্রে এটি কেন্দ্রিক নয়। এই দুটি বৈশিষ্ট্য প্রয়োগ করে কীভাবে কেন্দ্র স্থাপন করবেন সে সম্পর্কে কোনও পরামর্শ

— অ্যালেক্সি স্ট্র্যাখ

Answer 4

এটিও এটি করবে

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}

Comments

আপনি কি বোঝাতে চেয়েছিলেন text-align:center;এবং margin:0 5px;? আমি একটি;

— jagb

নির্বাচক ব্লকের শেষ সম্পত্তিটির জন্য @ জাগবি সেমিকোলনগুলির প্রয়োজন নেই।

— টাইলার

@ টাইলারএহ হ্যাঁ সত্য, একটি নির্বাচক ব্লকের সর্বশেষ সম্পত্তির জন্য সেমিকোলনগুলির প্রয়োজন নেই তবে সেমিকোলনগুলি ব্যবহার করা সর্বদা সেভার হয় .. আমি যদি কোনও সিএসএস ফাইল লিখি তবে অন্য বিকাশকারী আমার ফাইলটি পরে সম্পাদনা করবে, তারা কিছু কোড যুক্ত করবে (লাইনের পরে) হারিয়ে যাওয়া সেমিকোলনের সাথে, সেই সিএসএস ফাইলে আমি যে লাইনটি লিখেছিলাম) এবং তাদের উচ্চতা, প্রস্থ বা অন্যান্য ঘোষণাপত্রটি কাজ করছে না (বা আরও খারাপ, তারা লক্ষ্য করে না যে এটি কাজ করছে না)। আমি বলব এটি সেমিকোলনগুলিকে ছেড়ে যাওয়া নিরাপদ This এজন্য আমি সেমিকোলন ব্যবহার করি এবং সেমিকোলনগুলি কখনই বাইরে রাখি না।

— jagb

@ জাগব যদি অন্য বিকাশকারী আপনার ফাইলটি পরে সম্পাদনা করে তবে সেগুলি যেখানে প্রয়োজন সেখানে সেমিকোলনে যুক্ত করবে, বা ত্রুটিযুক্ত কোড লেখার ক্ষেত্রে এটি তাদের সমস্যা হবে। আপনার প্রাথমিক মন্তব্যের প্রতিক্রিয়াটি এখনও: "সিএসএসের শেষ লাইনে অর্ধিকোলগুলি একটি শৈলীর পছন্দ"।

— টাইলার এইচ

আমি jagb সাথে একমত। এই সাইটের ভাল স্টাইল পছন্দ প্রচার করা উচিত। একটি ভাল শৈলী কোড সহজেই ভাঙা যায় না code প্রতিটি লাইনে সেমিকোলন লাগাতে আপনার এক সেকেন্ডের 1/10 তম ব্যয় হতে পারে, একটিমাত্র অনুপস্থিত সেমিকোলনটি সন্ধান করতে ডিবাগিং করতে আপনার সময় লাগতে পারে। বড় প্রযুক্তি সংস্থাগুলি কেন এটির জন্য জোর দেয় তা ঠিক আছে: গুগল এইচটিএমএল / সিএসএস স্টাইল গাইড - ঘোষণা স্টপস

— জর্জি প্যাটসাইডার

Answer 5

কোনও চিত্র, বা যে কোনও উপাদানকে কেন্দ্র করে আনার জন্য আমি সবচেয়ে ভাল জিনিস খুঁজে পেয়েছি (যা সমস্ত ব্রাউজারে কাজ করে বলে মনে হচ্ছে) হ'ল আনুভূমিকভাবে একটি সিএসএস ক্লাস তৈরি করা এবং নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করা:

সিএসএস

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

তারপরে আপনি নিজের ট্যাগটিতে তৈরি করা সিএসএস শ্রেণিটি নীচে প্রয়োগ করতে পারেন:

এইচটিএমএল

<img class="center" src="image.jpg" />

আপনি নিম্নলিখিতটি করে নিজের উপাদানগুলিতে সিএসএস ইনলাইন করতে পারেন:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... তবে আমি সিএসএস ইনলাইন লেখার সুপারিশ করব না কারণ এরপরে আপনি যদি স্টাইল পরিবর্তন করতে চান তবে আপনার কেন্দ্রিক সিএসএস কোড ব্যবহার করে আপনার সমস্ত ট্যাগগুলিতে একাধিক পরিবর্তন করতে হবে।

Comments

কাজটি করেছেন তবে ব্রাউজারের সামঞ্জস্যের জন্য আপনাকে অন্য রূপের রূপান্তর ব্যবহার করতে হবে।

— জে স্মোক

Answer 6

এটিই আমি শেষ করেছিলাম:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

যা চিত্রের উচ্চতা 600px এর মধ্যে সীমাবদ্ধ করবে এবং অনুপাত বজায় রেখে অনুভূতিকেন্দ্রিকভাবে (বা পিতামাতার প্রস্থটি ছোট হলে আকার পরিবর্তন করবে)।

Answer 7

আমি একটি অঙ্গ নেভিগেশন যেতে যাচ্ছি এবং নীচের আপনি কি পরে যাচ্ছি তা বলতে যাচ্ছি।

দ্রষ্টব্য, নিম্নলিখিত আমি বিশ্বাস করি দুর্ঘটনাক্রমে প্রশ্নে বাদ দেওয়া হয়েছিল (মন্তব্য দেখুন):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

সুতরাং আপনার যা প্রয়োজন তা হ'ল:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Comments

হুম ... আমি বাজি ধরব। আমি আমার সমাধানটিতে চিত্রটি কেন্দ্রিক করেছিলাম, তবে আমি দেখতে পাচ্ছি যে প্রশ্নটি কীভাবে অন্য ডিভের মধ্যে ডিভ-এনকোলেজিং-দ্য চিত্রটি কেন্দ্র করে হিসাবে ব্যাখ্যা করা যেতে পারে। যেভাবেই হোক, একই সমাধান।

— মারভো

উভয়ই সমাধান অনুশীলনে কাজ করছে। আমি উভয় সমাধান চেষ্টা করেছিলাম এটি কার্যকর হবে না আগে। দয়া করে প্রশ্নের সম্পাদনাটি দেখুন

— জ্যাকব উইন্ডসর

Answer 8

একটি চিত্র অনুভূমিকভাবে কেন্দ্র করতে, এটি কাজ করে:

<p style="text-align:center"><img src=""></p>

Comments

হ্যাঁ, তবে যদি আপনি এই নীচে থাকা বোরিং সাদা স্থানটি রোধ করতে ছবিটিকে ব্লক হিসাবে প্রদর্শন করার পরিকল্পনা করেন তবে এটি আর কাজ করবে না ...

— ডা ফ্রেড

Answer 9

এটি আপনার সিএসএসে যুক্ত করুন:

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

কেবলমাত্র একটি শিশু উপাদানকে উল্লেখ করা যা সেই ক্ষেত্রে চিত্র।

Comments

আপনি এখনও শীর্ষের মার্জিনে অ্যাক্সেস চান যখন

— এটির জন্য

Answer 10

বাম এবং ডানদিকে সমান পিক্সেল প্যাডিং রাখুন:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Answer 11

ভিতরে ছবি রাখুন ক newDiv। divচিত্রটির মতো সমেত প্রস্থটি প্রস্থ করুন । প্রয়োগ margin: 0 auto;করুন newDiv। এটি ধারকটির মধ্যবর্তী স্থানে থাকা উচিত div।

Answer 12

অবস্থান ব্যবহার করুন। নিম্নলিখিতগুলি আমার জন্য কাজ করেছে ... (অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রিক)

চিত্রের কেন্দ্রে জুমের সাহায্যে (চিত্রটি ডিভিটি পূরণ করে):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

চিত্রের কেন্দ্রে জুম ছাড়া (চিত্রটি ডিভিটি পূরণ করে না ):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

Answer 13

আপনি ন্যূনতম কোড সহ ফ্লেক্স বাক্স ব্যবহার করে আপনার সামগ্রীটিকে সারিবদ্ধ করতে পারেন

এইচটিএমএল

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

সিএসএস

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

জেএস ফিডাল লিঙ্ক https://jsfiddle.net/7un6ku2m/

Answer 14

একটি ডিভ মধ্যে একটি চিত্র কেন্দ্র

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Answer 15

আমি কয়েকটি উপায় চেষ্টা করেছি। তবে এই উপায়টি আমার পক্ষে পুরোপুরি কার্যকর

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Answer 16

কোনও চিত্রকে কেন্দ্র করার একটি প্রতিক্রিয়াশীল উপায় এরকম হতে পারে:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Answer 17

আপনি এই ইনলাইন (যেমন যখন একটি ইনপুট বক্স ব্যবহার হিসাবে) করতে থাকে, তাহলে
এখানে একটি দ্রুত হ্যাক যে আমার জন্য কাজ হল: আপনার (এই ক্ষেত্রে ইমেজ লিঙ্ক) ঘিরে
একটি divসঙ্গেstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

Answer 18

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Comments

স্ট্যাকওভারফ্লোতে স্বাগতম! আপনার উত্তরে দয়া করে কিছু ব্যাখ্যা যুক্ত করুন।

— ম্যাক্সিমিলিয়ান পিটার্স

আমরা যদি সমস্ত ডিভাইসের জন্য পৃষ্ঠার নির্দিষ্ট <div> বা <section>অনুভূমিকভাবে উভয় স্থানে নির্দিষ্ট বা উভয় স্থির করতে চাই তবে কেবল আপনি এই স্টাইল কোডটি ব্যবহার করতে পারেন !!!!

— শিভা কালীমূর্তি

দেখে মনে হচ্ছে এই উত্তরটি অন্য কোনও প্রশ্নের সাথে সম্পর্কিত :)

— মনোজ কুমার

Answer 19

হ্যাঁ, কোড এই ঠিক মত কাজ

<div>
 <img>
</div>

তবে কেবল আপনাকে মনে করিয়ে দেওয়ার জন্য, চিত্রটির জন্য স্টাইল

object-fit : *depend on u*

সুতরাং চূড়ান্ত কোড উদাহরণ মত হতে

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Answer 20

ধারকটিতে ফ্লেক্স সম্পত্তি ব্যবহার করা উলম্ব এবং অনুভূমিকভাবে উভয়ই কেন্দ্রীভূত করতে সক্ষম হওয়ার সঠিক উত্তর।

এখানে শীর্ষস্থানীয় উত্তর কোনও আইটেমকে উলম্বভাবে, আনুভূমিকভাবে কেন্দ্রীভূত করার জন্য কাজ করে না।

Comments

ওপি স্পষ্টভাবে অনুভূমিক প্রান্তিককরণের জন্য জিজ্ঞাসা করেছিল।

— অ্যালভিন ময়ো

Answer 21

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>