Question

我已获得以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

对不好的风格抱歉，我刚刚开始学习CSS ...

现在，在浏览器中看到之后，我看到了一张狗的图片，旁边还有一些文字。我想让这个文本在中心（垂直）对齐。基本上，目前它看起来像this，我想像this那样设置它。我应该如何修改我的CSS代码以显示它？谢谢！

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

Answer 1

此链接可能会对您有所帮助，在垂直对齐方面，我经常使用此技巧：

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和line-height的高度。像：

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

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

Answer 3

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

例如：

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在今年晚些时候推出，这可能会更加重要）

您可以通过父级display:table;和子级display:table-cell;来实现您的目标。在下面的代码中，我重新安排了HTML，因此图像首先被移除float:right;（我的经验导致我不再使用float，因为它会导致许多令人头疼的事情可以避免，但是＆＃ 39;更大的讨论）。

向子项添加vertical-align:middle;会使它们在＆＃34;单元格中垂直对齐。＃/ p>

之前在文本上方看到空格的原因是每个浏览器都有一个应用的默认样式表。例如，Firefox有：

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

为了帮助您理解这些内容，我建议您使用Mozilla Firefox并下载Firebug插件。

这里是完整的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在CSS中使用border-box时将文本放在框的中心？

4 个答案: