title: Center image inside one of two columns with CSS
body: <p>So I am trying to center my image inside one of my two columns. In this case is the left column. Take the image below for example.</p>
  
  <p><a href="https://i.stack.imgur.com/El48I.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/El48I.jpg" alt="enter image description here"></a></p>
  
  <p>I got some text in column two, but the image in column one does not look center as the way I envision it. Here is what it is currently looking like right now.</p>
  
  <p><a href="https://i.stack.imgur.com/374my.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/374my.jpg" alt="enter image description here"></a></p>
  
  <p>The red circled is where I want my picture to actually be located.</p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Regular Desktop View */
  
  h1 {
    display: none;
  }
  
  img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    text-align: center;
  }
  
  h2 {
    text-align: left;
    margin-top: 30px;
  }
  
  p {
    margin-right: 50px;
  }
  
  
  /* Create two equal columns that floats next to each other */
  
  .column {
    float: left;
    width: 50%;
    padding: 15px;
  }
  
  
  /* Clear floats after the columns */
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  /* End regular Desktop View */
  
  
  /* Tablet/Smartphone view begins */
  
  @media screen and (max-width: 768px) {
    img {
      width: 170px;
      height: 170px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    h1 {
      display: block;
      font-family: sans-serif, arial, verdana, lucida;
    }
    h2 {
      text-align: center;
    }
    p {
      width: 100%;
      padding: 10px;
    }
    /* Home Page */
    .column {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  
    &lt;style&gt;
      /* Regular Desktop View */
      
      h1 {
        display: none;
      }
      
      img {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        text-align: center;
      }
      
      h2 {
        text-align: left;
        margin-top: 30px;
      }
      
      p {
        margin-right: 50px;
      }
      /* Create two equal columns that floats next to each other */
      
      .column {
        float: left;
        width: 50%;
        padding: 15px;
      }
      /* Clear floats after the columns */
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      /* End regular Desktop View */
      /* Tablet/Smartphone view begins */
      
      @media screen and (max-width: 768px) {
        img {
          width: 170px;
          height: 170px;
          display: block;
          margin-left: auto;
          margin-right: auto;
        }
        h1 {
          display: block;
          font-family: sans-serif, arial, verdana, lucida;
        }
        h2 {
          text-align: center;
        }
        p {
          width: 100%;
          padding: 10px;
        }
        /* Home Page */
        .column {
          width: 100%;
        }
      }
    &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;ul class="topnav"&gt;
      &lt;label for="toggle"&gt;&amp;#9776;&lt;/label&gt;
      &lt;input type="checkbox" id="toggle"&gt;
      &lt;div class="menu"&gt;
        &lt;li&gt;&lt;a href="index.html" class="active"&gt;Home&lt;/a&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
  
    &lt;h1 align="center"&gt;HOME&lt;/h1&gt;
  
  
    &lt;div class="row"&gt;
  
      &lt;div class="column"&gt;
        &lt;img src="img/image1.jpg" class="float-center"&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
        &lt;h2&gt;This is an h2 Title&lt;/h2&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
          quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
        &lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I view this in full screen in desktop mode, it is just not how I want it. But when I resize my browser to tablet/smartphone mode, I'm cool with that. My goal here is to center the image in column one no matter how you resize it under it reaches the pixels max-width.</p>