Question

我有这个代码，它将两个图像对齐到页面的左侧和右侧，其间的空格为：

.center {
  width: 100%;
  display: table;
}
.leftk {
  display: table-cell;
}
.rightk {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}

<div class="center">
  <div class="leftk">
    <img src="http://loremflickr.com/300/200" />
  </div>
  <div class="rightk">
    <img src="http://loremflickr.com/400/100" />
  </div>
</div>
<span>Text</span>

我尝试对inline-block执行相同的操作，但我无法将图像垂直右对齐。你能否告诉我一个如何用inline-block获得相同结果的快速示例？

编辑：如果页面尺寸小于图片宽度，我想将它们显示在彼此之下。

Answer 1

您可以使用css3 flexbox ，

使用display：flex而不是display：table
添加justify-content：space-between;

它的工作正常。

＆＃13;

.center {
  width: 100%;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.leftk>img {
  width:100px;
  height:100px;
}
.rightk>img {
  width:50px;
  height:50px;
}

＆＃13;

<div class="center">
    <div class="leftk" style="display: table-cell;">
        <img src="https://i.stack.imgur.com/wwy2w.jpg"/>
    </div>
    <div class="rightk">
        <img src="https://i.stack.imgur.com/wwy2w.jpg"/>
    </div>
</div>
<span>Text</span>

＆＃13;

Answer 2

以下是使用内联块的方法：

<强> jsFiddle

.center {
  font-size: 0; /*remove white space*/
  text-align: justify;
}
.center:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.leftk,
.rightk {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}

<div class="center">
  <div class="leftk">
    <img src="//dummyimage.com/200x200" />
  </div>
  <div class="rightk">
    <img src="//dummyimage.com/100x100" />
  </div>
</div>

两个图像一个左右一个垂直居中

2 个答案: