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

是否有一种方法可以在不使用

Flexbox

的情况下将web组件彼此相邻对齐。我知道这是一个很棒的工具，但不幸的是它不能与IE 9或10一起工作。我希望链接中的文本显示在图像旁边。JSFiddle显示了工作代码，但是使用FlexBox，如何在不使用FlexBox的情况下实现这一点

代码：

对于IE10及以下（可能在IE7/8之前）

您有两种解决方案：

内联块 您可以在

img

中使用

display:inline block

和

vertical align:middle

，并使用

div

和

宽度

和

边距：auto

将其水平居中

div{
宽度：50%；
/*根据需要更改值，即使在px中也是如此*/
保证金：自动；
文本对齐：居中；
/*演示*/
边框：1px纯红；
}
.网页链接{
颜色:"828282 ;；
}
.pagelinks a{
文字装饰：无；
}
.pagelinks-img{
边框：1px实心透明；
显示：内联块；
垂直对齐：中间对齐；
}
.pagelinks img：悬停{
边界半径：3px；
边框：1px实心--8282；
}

|第{5}页，共{6}|
适用于IE10及以下（可能在IE7/8之前）

您有两种解决方案：

内联块
您可以在
img
中使用
display:inline block
和
vertical align:middle
，并使用
div
和
宽度
和
边距：auto
将其水平居中


div{
宽度：50%；
/*根据需要更改值，即使在px中也是如此*/
保证金：自动；
文本对齐：居中；
/*演示*/
边框：1px纯红；
}
.网页链接{
颜色:"828282 ;；
}
.pagelinks a{
文字装饰：无；
}
.pagelinks-img{
边框：1px实心透明；
显示：内联块；
垂直对齐：中间对齐；
}
.pagelinks img：悬停{
边界半径：3px；
边框：1px实心--8282；
}

|第{5}页，共{6}|
不带Flexbox

HTML

不带Flexbox

HTML

试试向左/向右浮动你明白我的问题了吗？浮动左/右将使组件左/右移动，同时我希望它们对齐：）您检查了JSFIDLE吗？@Dekel，有什么问题吗？我尝试在不使用Flexbox的情况下获取它。JSFIDLE将与Flexbox一起显示。尝试浮动左/右您理解我的问题吗？“左/右浮动”将在我希望组件对齐时向左/右移动：）您检查了JSFIDLE吗？@Dekel，有什么问题吗？我尝试在不使用Flexbox的情况下获取它。JSFIDLE与Flexbox一起显示。很好，这正在工作。我尝试了display table属性，但在img部分没有尝试。你的解决方案是有道理的。非常感谢。@Mike，因为我有了新的投票，所以我决定重新审视这一点，并改进了两个代码片段的代码，简化了它。很酷，这是可行的。我尝试了display table属性，但在img部分没有尝试。你的解决方案是有道理的。非常感谢。@Mike因为我有了新的投票，所以我决定重新审视这一点，并改进了这两个代码片段的代码，简化了它。
<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>'/>

.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;
} 

<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>

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

}

.pagelinks a {
  text-decoration: none;
}

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