在 CSS 中使用边框框时如何将文本放在框的中央？

Question

我有以下代码：

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

现在，在浏览器中看到它后，我看到了一张狗的图片，旁边还有一些文字。我想让这个文本居中对齐（垂直）。基本上，目前它看起来像 this, and I would like to set it up like this。我应该如何修改我的 CSS 代码以按原样显示它？谢谢！

编辑我的另一个问题是 - 为什么文本没有排列在图片的顶层到顶层？我在我的 css 代码中没有看到任何限制，有人知道它是如何工作的吗？

Answer 1

这个link可能对你有帮助，我在垂直对齐时经常使用这个技巧：

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

添加此代码：

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

到文本周围的容器（在您的情况下为 'p'），并确保设置环绕图像和文本的容器高度 (article.item)。

Answer 2

您想设置 div 的高度和行高。喜欢：

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

请在此处查看示例：http://jsfiddle.net/BRxKX/

Answer 3

如果可以，请使用 flexbox，它允许您在没有任何奇怪的规则或 hack 的情况下执行此操作。

例如：

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。尝试编辑 p 标签内的文本，看看它是如何工作的。

Answer 4

我的建议是忽略任何建议使用 display:flex 的人，因为它 doesn't have the browser support it needs for public domain。（目前截至 2015 年 4 月 14 日。随着时间的推移，情况会变得更好，一旦 Windows 10 今年晚些时候问世，这可能会成为一个更认真的考虑因素）

您想要的可以通过 parent 上的 display:table; 和 children 上的 display:table-cell; 实现。在下面的代码中，我重新排列了 HTML，所以图像是第一个并删除了 float:right;（我的经验让我不再使用 float，因为它会导致很多可以避免的头痛，但这是一个更大的讨论）。

将 vertical-align:middle; 添加到 children 将使它们在 "cell" 中垂直对齐。

您之前在文本上方看到 space 的原因是每个浏览器都应用了默认值 style-sheet。例如 Firefox 有这个：

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

为了帮助您理解这些事情，我建议使用 Mozilla Firefox 并下载 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 中使用边框框时如何将文本放在框的中央？

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

html

css

border-box