How to put text in the center of box while using border-box in CSS?

问题

I've got the following 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 */
}

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

  <article class="item">

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

  </article>
</div>

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 text. I would like to have this text aligned in the center (vertically). Basically, currently it looks like this, and I would like to set it up like this. How should I modify my CSS code to display it as it is? Thanks!

EDIT 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?

回答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>

回答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.

回答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/

回答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.

来源：https://stackoverflow.com/questions/29630935/how-to-put-text-in-the-center-of-box-while-using-border-box-in-css

标签

html

css

border-box