0

我有以下代码：

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

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

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

4

4 回答 4

0

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

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）的高度。

于 2015-04-14T15:13:21.070 回答
0

您还想设置 div 的高度和行高。像：

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

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

于 2015-04-14T15:16:09.917 回答
0

如果可以，请使用 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;
}

在这里查看它的实际应用。尝试编辑p标签中的文本，看看它是如何工作的。

于 2015-04-14T15:27:25.800 回答
0

我的建议是忽略任何建议使用 display:flex 的人，因为它没有 public domain 所需的浏览器支持。（目前截至 2015 年 4 月 14 日。随着时间的推移，情况会变得更好，并且一旦 Windows 10 在今年晚些时候推出，这可能会成为一个更严肃的考虑因素）

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

添加vertical-align:middle;到孩子将使他们在他们的“单元格”中垂直对齐。

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

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

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

这是完整的代码：

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

于 2015-04-14T16:07:24.617 回答