有没有一种方法可以在不使用 Flexbox
的情况下将 Web 组件彼此相邻对齐。我知道它是一个很棒的工具,但不幸的是它不适用于 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;
}
最佳答案
对于IE10及以下(可能到IE7/8),
您有 2 个解决方案:
内联 block
您可以在 img
中使用 display:inline-block
和 vertical-align:middle
,并用 将其包裹起来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;
}
<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>
关于html - 如何在不使用 Flexbox 的情况下水平对齐元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44209896/