在没有弹性盒的情况下从两侧对居中元素“浮动”？

Posted 2023-03-05

【中文标题】在没有弹性盒的情况下从两侧对居中元素“浮动”？

【英文标题】："Float" against centered element from both sides without flexbox?

【发布时间】：2014-07-01 13:38:10

【问题描述】：

对于网站的标题，我想使一个元素居中，并且必须让多行链接从两侧浮动。行的长度不同，所以我不能将整个菜单居中。

看比解释更容易，所以这是我想要实现的效果的图像和小提琴。 http://jsbin.com/katuroxi/11/edit

然而，小提琴使用新的flexbox，我想（如果可能的话）避免。 没有他们有没有办法做到这一点？

【参考方案1】：

你可以做到like this:

.parent 
  display: table;
  table-layout:fixed;
  padding: 0;
  font-size:0px;
  width:100%;


ul 
  padding: 0;
  margin: 0;


.left, .right, .fix 
  display:table-cell;


.left 
  text-align: right;


li 
  list-style: none;
  display: inline-block;
  border: 1px solid red;
  font-size:16px;


.fix 
  text-align: center;
  border: 1px solid red;
  width: 120px;
  font-size:16px;

这是做什么的：

将display:table 添加到.parent 并使其以类似表格的逻辑呈现并使其成为100%。 将display:table-cell 添加到.left, .right, .fix，这样它就会像表格单元格一样呈现。因此，每个单元格将占用表格宽度的33%。 将font-size:0px 添加到.parent 以删除display:inline-block 元素之间的空白。 在我们拥有文本的元素中将font-size 设置回所需的值。

【讨论】：

不是一个非常漂亮的解决方案，但肯定是一个兼容的解决方案。感谢您的快速回复！

不客气！顺便说一句，不要担心使用类似表格的东西。在这种情况下，使用表格进行布局的大部分丑陋不适用于使用display:table :)

【参考方案2】：

您可以在.parent 上将所有元素用作display:inline;（或display:inline-block，如果您需要一些填充）和text-align:center; 上的.parent

.parent 
  padding: 0;
  width: 100%;
  text-align: center;


ul 
  padding: 0;
  margin: 0;
  display: inline;


.left, .right, .fix 
  display: inline;
  text-align: center;


li, .fix 
  list-style: none;
  border: 1px solid red;
  display: inline;

http://jsbin.com/katuroxi/12/edit

【讨论】：

就像我说的，两侧的宽度不一定相同。我应该为小提琴选择不平衡的。这是您的解决方案的样子，右边四个，左边三个：jsbin.com/katuroxi/17/edit

如您在此处看到的jsbin.com/katuroxi/15/edit，如果您在任一侧添加更多链接，center 元素不会保持居中。