在图像

Question

我有两个div。第一个有图像文件，另一个有用户名。我只是想像这样将第二个div垂直对齐。

但是这个并没有完全一致。这个屏幕已经编码，但问题是我仍然无法找到对齐中间用户名div的完美方式。我只是用肉眼调整填充物。

这是我的代码

.tag-header {
    padding: 12px;
    overflow: auto;
}
.tag-header .tag-header-img {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    float: left;
}

.tag-header .info {
    padding: 14px 11px;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 14px;
}

.tag-header .info p {
    margin: 0;
    font-weight: 600;
    line-height: 1;
    font-size: 1.3rem;
}
.tag-header .time {
    display: block;
    font-size: 1.2rem;
}
.info span {
    font-weight: 300;
    color: #b9b9b9;
}

<div class="tag-header">
        <div class="col-md-6">
            <div class="row">
                <img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
                <div class="info">
                    <p>John Stevens</p>
                    <span class="time">2 minutes ago</span>
                </div>
            </div>
        </div>

fiddle

任何解决方案？

Answer 1

你似乎做得很好，使它们都具有相同的高度，图像不必使用float: left;，你也可以使用display: inline-block;和vertical-align: middle;在图像和名称上，这样你就不需要它们具有相同的高度。

另外，请确保正确使用Bootstrap，首先需要一个“容器”div，在容器中放置一行，然后在该行中放置列。

如果要在该列中添加更多列，则只在列div中放置一个带行类的div。

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
</div>

Answer 2

继承你的小提琴更新https://jsfiddle.net/p4x7d3fq/5/ - 我添加了边框，以便你可以看到。

使用display:table-cell可以达到这个目的，如果你不介意轻微的改变，包括增加一个高度来匹配你的图像。

Answer 3

尝试使用flexbox：

akka {
  stdout-loglevel = off // defaults to WARNING can be disabled with off. The stdout-loglevel is only in effect during system startup and shutdown
  log-dead-letters-during-shutdown = off
  loglevel = info
  log-dead-letters = off
  log-config-on-start = off // Log the complete configuration at INFO level when the actor system is started

  loggers = ["akka.event.slf4j.Slf4jLogger"]
  logging-filter = "akka.event.slf4j.Slf4jLoggingFilter"

  persistence {
    journal {
      plugin = "casbah-journal"
    }
  }
}

casbah-journal {
  mongo-url = "mongodb://localhost:27017/transaction.events"
  woption = 1
  wtimeout = 10000
  load-attempts = 5
}