How To Put Text In The Center Of Box While Using Border-box In CSS?

I've got the following code: sorry for bad style, I've just started to learn CSS... Now, after seeing that in the browser, I see the picture of a dog and next to it there's some t

Solution 1:

My suggestion is to ignore anyone that suggests using display:flex, because it doesn't have the browser support it needs for public domain. (currently as of 14/04/15. This will get better as time goes on and will probably be a more serious consideration once Windows 10 comes out later this year)

What you are wanting can be achieved with display:table; on the parent and display:table-cell; on the children. In the code below I have rearranged the HTML so the image is first and removed the float:right; (my experience leads me to not use float anymore as it causes so many headaches that can be avoided, but that's a much bigger discussion).

Adding vertical-align:middle; to the children will make them vertically align in their "cell".

The reason you were previously seeing space above your text is because each browser has a default style-sheet that is applied. For example Firefox has this:

p, dl, multicol {
    display: block;
    margin: 1em 0;
}

To aid your understanding of such things I suggest to use Mozilla Firefox and download the Firebug add-on.

Here's the full code:

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  display:table;
  /* 80 */
}
.item__img,
.item__info {
  width: 50%;
  display:table-cell;
  vertical-align:middle;
}
.item__img {} .item__img .img-map {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
.item__img img {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}

<div class="container" role="main">

  <article class="item">

    <div class="item__img">
      <div class="img-map">
        <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
      </div>
    </div>
    <div class="item__info">
      <p>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.</p>
    </div>

  </article>
</div>

Solution 2:

This link might help you, I use this trick very often when it comes to vertically aligning:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Add this code:

  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

to a container around the text (in your case the 'p'), and make sure to set the height of the container (article.item) that wraps around both the image and the text.

Solution 3:

You want to set a height of your div and line-height aswell. Like:

.div{ height: 100px;
      line-height: 100px;}

See an example here: http://jsfiddle.net/BRxKX/

Solution 4:

Use flexbox if you can, it allows you to do this without any odd rules or hacks.

For example:

HTML

<div class="container">
    <div class="image">200 x 200</div>
    <p>Lots of text here...</p>
</div>

CSS

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    align-items: center;
}

.image {
    height: 200px;
    width: 200px;
    min-width: 200px;
}

See it here in action. Try editing the text within the p tag to see how it works.