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

How to align horizontally elements without using Flexbox?(如何在不使用Flexbox的情况下水平对齐元素?)

本文介绍了如何在不使用Flexbox的情况下水平对齐元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有一种方法可以在不使用Flexbox的情况下将Web组件彼此对齐。我知道它是一个很棒的工具,但不幸的是它不能在IE9或IE10上运行。我希望链接中的文本出现在图像的旁边。JSFdle显示了工作代码,但是使用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

推荐答案

IE10及更低版本(可能到IE7/8),

您有两个解决方案:

内联块

您可以在img中使用display:inline-blockvertical-align:middle,并用div用一些widthmargin:auto将其水平居中

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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-linksvertical-align:middle应用于img,并再次将其置于div居中。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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>

这篇关于如何在不使用Flexbox的情况下水平对齐元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在不使用Flexbox的情况下水平对齐元素?

基础教程推荐