Question

我有div的问题。我想要链接＆＃34; Go＆＃34;在父div的右边对齐和垂直中间。我尝试了几种方法，但还没有成功。

在这里你可以看到我的HTML和CSS代码：

＆＃13;

div.row {
  position: relative;
  border-bottom: 1px dotted #999999;
}
div.list div.name {
  float: left;
  width: 40%;
}
div.list div.info {
  float: left;
  width: 60%;
}
div.list div.action {
  display: inline-block;
  text-align: right;
  vertical-align: middle;
}

＆＃13;

<div class="list">
  <div class="row">
    <div class="name">
      <span>1</span>
      <br />
      <a href="1.php">1</a>
      <br />(2015-09-30)
    </div>

    <div class="info">
      <b>Place:</b>
      <br />Now 6
      <br />Later 32

      <div class="action">
        <a href="1go.php">Go</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

所以，如果你有更好的想法并知道如何解决我的问题，我很乐意听到。

如果可能的话，我正在寻找跨浏览器的解决方案。这次没有JavaScript / jQuery允许。

Answer 1

对于具有动态高度和跨浏览器功能的父级，您需要使用较旧的CSS2技巧，在display：table div中使用display：table-cell。 This explains it in more detail

HTML

<div class = "info-left">
    <b>Place:</b>
    <br />Now 6
    <br />Later 32
  </div>

CSS

.info{
  display: table;
}

div.info div.action{
  display: table-cell;
  vertical-align: middle;
}

Here's a fiddle

如何将div定位到父div的右侧和中间

1 个答案: