title: How to put text in the center of box while using border-box in CSS?
body: <p>I've got the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  .container {
    width: 100%;
    max-width: 60rem;
    /* 960 */
    margin: 0 auto;
  }
  .item {
    width: 100%;
    overflow: hidden;
    margin-bottom: 5rem;
    /* 80 */
  }
  .item__img,
  .item__info {
    width: 50%;
    float: right;
  }
  .item__img {} .item__img .img-map {
    width: 95%;
    height: 18.750rem;
    /* 300 */
  }
  .item__img img {
    width: 95%;
    height: 18.750rem;
    /* 300 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" role="main"&gt;
  
    &lt;article class="item"&gt;
  
      &lt;div class="item__info"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
          vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
          rutrum ornare.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item__img"&gt;
        &lt;div class="img-map"&gt;
          &lt;img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>sorry for bad style, I've just started to learn CSS...</p>
  
  <p>Now, after seeing that in the browser, I see the picture of a dog and next to it there's some text. I would like to have this text aligned in the center (vertically). Basically, currently it looks like <a href="http://i.imgur.com/FkUqNnt.png" rel="nofollow">this</a>, and I would like to set it up like <a href="http://i.imgur.com/PUz90f9.png" rel="nofollow">this</a>. How should I modify my CSS code to display it as it is? Thanks!</p>
  
  <p><strong>EDIT</strong> My other question is - why the text is not lined up on the top to the top layer of the picture? I don't see any constraint for that in my css code, does anybody know how it works?</p>