Question

我的安排如下：

<style>
    .title {
      background: red;
    }
    .outer {
      display: inline-block;
      border: 1px solid red; 
      background: green;
    }
    .inner {
      display: inline-block;
      vertical-align: middle;
    }
    .left {
      background: yellow; 
    }
    .right {
      background: cyan; 
    }
</style>

<div class="outer">
  <div class="title">long title</div>
  <div class="inner left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="inner right">
    <div>1</div>
    <div>2</div>
  </div>
</div>

如何让类right的div与右对齐？

结果可以在http://www.cssdesk.com/uCmVL

看到

修改

两个内部div需要保持垂直对齐。即vertical-align: whatever;

修改2

布局有点复杂，它使用变换来放大和缩小，我在内部类中尝试了top: 50%; transform: translateY(-50%);但是它打破了计算以放置SVG PATH元素

Answer 1

如果总是难以向右：

spl_autoload_register( function( $class ) {
    $pos = strrpos( $class, '\\' );
    include ( $pos === false ? $class : substr( $class, $pos + 1 ) ).'.php';
});

Answer 2

以前的所有解决方案都会将其与右侧对齐，但是它们不会将垂直对齐保持在中间位置。要做到这一点，你需要切换到使用display：table＆amp; table-cell或调整代码绝对定位在相对定位的容器内使用top＆amp;右边距。

如果您的桌子不是动态的并且具有固定的高度，您可以使用像素值进行顶部定位，否则使用百分比。

http://www.cssdesk.com/H7pxN

.title {
  background: red;
}

.outer {
  position: relative; //
  display: inline-block;
  border: 1px solid red; 
  background: green;
}

.inner {
  display: inline-block;
  vertical-align: middle;
}

.left {
  background: yellow; 
}

.right {
  position: absolute; // 
  right: 0; //
  top: 40%; // 
  background: cyan; 
}

Answer 3

你可以用flexbox做很多事情。以下是您正在寻找的布局示例。

.main-container {
  background-color: #eee;
}
h1 {
  text-align: center;  
}
.columns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.red {
  background-color: #f00;  
}

.blue {
  background-color: #f99;  
}

<div class="main-container">
  <h1>Title</h1>
  <div class="columns">
    <div class="column red">
      <p>First Row</p>
      <p>Second Row</p>
      <p>Third Row</p>
    </div>
    <div class="column blue">
      <p>Centered First Row</p>
      <p>Centered Second Row</p>
    </div>
  </div>
</div>

Answer 4

让你的外部div相对定位，然后使右边的div向右移动。像这样

.outer {

    position: relative;

    display: inline-block;
    border: 1px solid red; 
    background: green;
}

.right {

    position: absolute;
    right: 0;

    background: cyan; 
}

Answer 5

如果您有容器的固定宽度（@Mapper public interface CarMapper { CarMapper INSTANCE = Mappers.getMapper(CarMapper.class); @Mapping(source = "name", target = "fullName") CarDto car2CarDto(Car car); }），，我会在问题中发布的图像中注意到ALL具有相同的固定宽度，如果是这样的话，有一个解决方法，那么给.outer div .right，并将position:relative值等于精确定义left的固定宽度，然后翻译{{1} } .outer的价值。

jsFiddle

-100%

Answer 6

添加一个flexbox包装元素就可以了。

.title {
  background: red;
  text-align: center;
}

.outer {
  display: inline-block;
  border: 1px solid red; 
  background: green;
  min-width: 200px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left {
  background: yellow; 
}

.right {
  background: cyan; 
  text-align: right;  
}

<div class="outer">
  <div class="title">long title</div>
  <div class="wrapper">
    <div class="left">
      <div>1</div>
      <div>22</div>
      <div>333</div>
    </div>
    <div class="right">
      <div>1</div>
      <div>22</div>
    </div>
  </div>
</div>

如何将这个垂直对齐的div对齐？

6 个答案: