Question

我试图水平对齐三个元素; 导航后退按钮，水平内容边框和导航下一步按钮。

<div class="form-navigation">
  <a href="javascript:;" class="form-back">back</a>
  <span class="form-bottom-border-wrapper">
    <img class="form-bottom-border" src="http://www.afn.org/~afn21533/icons/redthick.gif" alt="">
  </span>
 <a href="javascript:;" class="form-continue">continue</a>
</div>

示例：https://jsfiddle.net/qd6uens0/1/

问题是，边界必须有响应。所以它必须适应导航按钮之间留下的空间，所有三个元素必须保持在同一条线上。

我的边框只有1个像素高度，与jsfiddle示例中的高度不同。

谢谢！

Answer 1

您可以使用 CSS表格和:before

执行此操作

＆＃13;

.form-navigation {
  display: table;
  width: 100%;
  vertical-align: middle;
}

.form-bottom-border-wrapper {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.form-bottom-border-wrapper:before {
  position: absolute;
  top: 50%;
  height: 1px;
  border-bottom: 1px solid black;
  width: 100%;
  content: "";
}

.form-back, .form-continue {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<div class="form-navigation">
  <a href="javascript:;" class="form-back">back</a>
  <span class="form-bottom-border-wrapper"></span>
  <a href="javascript:;" class="form-continue">continue</a>
</div>

＆＃13;

将表示水平内容边界的图像与表示导航元素的两个元素对齐

1 个答案: