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

Posted 2023-03-06

【中文标题】如何在不使用 Flexbox 的情况下水平对齐元素？

【英文标题】：How to align horizontally elements without using Flexbox?

【发布时间】：2017-10-27 20:07:57

【问题描述】：

有没有一种方法可以在不使用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;
 

JSFiddle

【问题讨论】：

尝试左/右浮动

你明白我的问题了吗？左/右浮动将在我希望它们对齐时向左/右移动组件:)

你检查你的 jsfiddle 了吗？

@Dekel，有什么问题吗？

我试图在不使用 Flexbox.JSFiddle 的情况下使用 Flexbox 来获取它。

【参考方案1】：

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

您有 2 个解决方案：

内联块

您可以在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>

【讨论】：

酷，这行得通。我尝试了显示表属性，但不在 img 部分。你的解决方案很有意义。非常感谢。

【参考方案2】：

没有弹性盒

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/