i want my image to be vertically align to center with respect to the left hand side text such that when the screen size changes the images still remains at the center with respect to the text.
i tried using vertical-align:middle but nothing works.

```css
#content .col {
  float: left;
  width: 50%;
  padding: 10px;
  background: white;
  font-size: 19px;
}

#content .col {
  height: 1000px;
}

#content .col img {
  float: right;
  vertical-align: bottom;
}

.skills {
  font-weight: bold;
  list-style: none;
}

.skills li:before {
  margin: 10px;
  /*  content: '✓';*/
  color: forestgreen;
  content: "\2714\0020";
}
```

```html
<div id="content">
  <div class="col  imgcol">
    <img class="responsive-img circle" src="img/bg.jpg" style="vertical-align:bottom">
  </div>
  <div class="col  textcol">
    <p><b>hello this is some text.this is some text.this is some text.this is some text.</b></p>
    <p>this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some
      text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is
      some text.this is some text.this is some text.this is some text.this is some text.</p>
    <ul class="skills">
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
      <li>this is some text.</li>
    </ul>
  </div>
```