如何在CSS中使用border-box时在文本框的中心放置文本？ [英] How to put text in the center of box while using border-box in CSS?

问题描述

我有以下代码：

* {
  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>

样式，我刚开始学习CSS ...

sorry for bad style, I've just started to learn CSS...

现在，看到在浏览器中，我看到一只狗的图片，旁边有一些文本。我想让这个文本在中心对齐（垂直）。基本上，目前它看起来像这，我想设置它像 this 。我应该如何修改我的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!

编辑我的其他问题是 - 为什么文字不会排列在图片的顶层顶部？我在css代码中没有看到任何约束，有没有人知道它是如何工作的？

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?

推荐答案

我的建议是忽略任何建议使用display：flex的用户，因为没有公共域所需的浏览器支持。 （目前截至2014年4月14日，这将随着时间的推移而变得更好，并且可能是一个更严重的考虑，一旦Windows 10在今年晚些时候出来）

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)

你想要什么可以通过 display：table; 在父级和 display：table-cell; 儿童。在下面的代码中，我重新安排了HTML，所以图像是第一个并删除 float：right; （我的经验导致我不使用 / code>，因为它导致这么多的头痛，可以避免，但这是一个更大的讨论）。

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).

添加

您之前在文本上方看到空格的原因是：

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;
}

$ b $ p

为了帮助您理解这些事情，我建议使用Mozilla Firefox并下载Firebug加载项。

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

以下是完整代码：

* {
  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>

这篇关于如何在CSS中使用border-box时在文本框的中心放置文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！