如何在不使用Flexbox的情况下水平对齐元素？

Question

有没有一种方法可以将 Web 组件排列在一起，而不使用 Flexbox。我知道这是一种很棒的工具，但不幸的是它不支持 IE9 或 10。我希望链接中的文本紧贴着图片显示。JSFiddle 显示了使用 FlexBox 的工作代码，我怎么才能在不使用 Flexbox 的情况下实现这个效果呢？

代码:

<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.first" value='<span class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <img src="../images/integration/SlowRight.jpg"/> <img src="../images/integration/FastRight.jpg"/> </span>'/>

CSS

.pagelinks {
float: right;
margin-right: 48%;
color: #828282;
display: table-cell;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center; 
}

.pagelinks a {
text-decoration: none;
}

.pagelinks img {
 border: 1px solid transparent;
}

.pagelinks img:hover {
 border-radius: 3px;
 border: 1px solid #828282;
} 

JSFiddle

- Mike

---

你明白我的问题吗？float left/right会将组件向左/右移动，而我希望它们对齐 :) - Mike

@Dekel，它有什么问题吗？ - Mike

我正在尝试不使用Flexbox来实现它。JSFiddle演示了Flexbox的用法。 - Mike

第5页中间的文本在不使用FlexBox的情况下比图像略低。 - Mike

我知道flexbox没有你需要的支持，但你可以考虑使用polyfill。https://github.com/jonathantneal/flexibility 祝你好运！ - Sean Gregory

Answer 1

对于IE10及以下版本（可能到IE7/8），有两种解决方案：

内联块元素

您可以在img中使用display:inline-block和vertical-align:middle，并用一些width和margin:auto包装它们来实现水平居中。

div {
  width: 50%;
  /* change the value as you prefer, even in px */
  margin: auto;
  text-align: center;
  /*demo*/
  border: 1px solid red;
}

.pagelinks {
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
}

.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}

<div>
  <span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>
</div>

表格/单元格

将display:table应用于.page-links，并将vertical-align:middle应用于img，然后再次将其包装在div中进行居中处理。

div {
  width: 50%;
  margin: auto;
}

.pagelinks {
  color: #828282;
  display: table;
  width: 100%;
  text-align: center;
  /*demo*/
  border: 1px solid red;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  vertical-align: middle;
}

.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}

<div>
  <span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>
</div>

- dippas

Answer 2

没有使用Flexbox

HTML

<div class="container">
<span class="pagelinks"> 
  <a href="{1}"> 
    <img src="../images/integration/FastLeft.jpg"/> 
  </a> 
  <a href="{2}"> 
    <img src="../images/integration/SlowLeft.jpg"/> 
  </a> 
  | Page {5} of {6} | 
  <a href="{3}">  
    <img src="../images/integration/SlowRight.jpg"/> 
  </a> 
  <a href="{4}"> 
    <img src="../images/integration/FastRight.jpg"/> 
  </a>
</span>
</div>

CSS

.container {
  width: 100%;
}
.pagelinks {
  display: block;
  text-align: center;

}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  vertical-align: middle;
}

https://jsfiddle.net/3h1mytqn/1/

- Sean Gregory