Question

有没有办法在不使用Flexbox的情况下将网络组件彼此对齐。我知道这是一个很棒的工具但不幸的是它不适用于IE 9或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

Answer 1

对于IE10及以下（可能直到IE7 / 8），

你有2个解决方案：

内联块

您可以在display:inline-block中使用vertical-align:middle和img，并使用div并使用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; }包裹起来。它是水平的

＆＃13;

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

＆＃13;

display:table

＆＃13;

表/表细胞

将.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; }中心。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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/

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

2 个答案:

内联块

表/表细胞