如何使用css将html元素与它们的中心等距放置_Html_Css

如何使用css将html元素与它们的中心等距放置

html css

如何使用css将html元素与它们的中心等距放置,html,css,Html,Css,我只是从WebDev开始，如果这是一件小事，那么很抱歉。我正在寻找一种方法，以平等的空间在我的导航栏的链接，无论他们有多长。因此，无论每个链接的文本有多长，对于5个链接，第3个链接始终完全位于页面中心到目前为止，我发现每个链接之间都有相同的空间。以下是我的代码（简化）： /*--------------------------原始代码-------------------------*/ * { 保证金：0；填充：0；列表样式：无；文字装饰：无；颜色：黑色； } .酒吧{ 宽度：

我只是从WebDev开始，如果这是一件小事，那么很抱歉。我正在寻找一种方法，以平等的空间在我的导航栏的链接，无论他们有多长。因此，无论每个链接的文本有多长，对于5个链接，第3个链接始终完全位于页面中心

到目前为止，我发现每个链接之间都有相同的空间。以下是我的代码（简化）：

/*--------------------------原始代码-------------------------*/
* {
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
颜色：黑色；
}
.酒吧{
宽度：100%；
背景颜色：灰色；
显示器：flex；
证明内容：中心；
}
.链接{
证明内容：中心；
显示器：flex；
}
李连杰{
利润率：1米2米1米2米；
}
/*-------------------我问题的解决办法---------------------*/
.链接{
/*将宽度设置为100%，否则它会变得更小*/
宽度：100%；
}
李连杰{
/*删除了侧边的边距，因为它现在与flex隔开*/
保证金：1em 0em 1em 0em；
/*让所有的李都一样大*/
弹性：1；
/*防止文本换行并隐藏溢出，
否则，它将通过扩展以适应li来更改布局*/
空白：nowrap；
溢出：隐藏；
/*对齐li中的链接*/
文本对齐：居中；
}


问题

只需在链接样式中添加文本对齐属性即可

.links {
justify-content: center;
display: flex;
text-align: center;

}如果我没弄错的话，我想你可以用

代替

带有

表格布局：固定样式

*{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
颜色：黑色；
}
.酒吧{
宽度：100%；
背景颜色：灰色；
显示器：flex；
证明内容：中心；
}
桌子{
表布局：固定；
宽度：100%；
文本对齐：居中；
}

问题
如果您不想使用其他元素，如table，那么我已经使用了，因此第三个div将始终位于中间，因为总共有5个div
<!DOCTYPE html>
<html>
  <head>
    <title>Problem</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        color: black;
      }
      .bar {
        background-color: grey;
        display: flex;
        justify-content: space-between;
      }
      .links {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .links li {
        margin: 1em 2em 1em 2em;
        width: 100%;
      }

      .link1 {
        flex: 1;
      }
      .link2 {
        flex: 1;
      }
      .link3 {
        flex: 2;
      }
      .link4 {
        flex: 1;
      }
      .link5 {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <ul class="links">
        <li class="link1">
          <a href="#">Text</a>
        </li>
        <li class="link2">
          <a href="#">Longer Text</a>
        </li>
        <li class="link3">
          <a href="#">#</a>
        </li>
        <li class="link4">
          <a href="#">Even Longer Text</a>
        </li>
        <li class="link5">
          <a href="#">The Longest Text in the List</a>
        </li>
      </ul>
    </div>
  </body>
</html>


问题
* {
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
颜色：黑色；
}
.酒吧{
背景颜色：灰色；
显示器：flex；
证明内容：之间的空间；
}
.链接{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
李连杰{
利润率：1米2米1米2米；
宽度：100%；
}
.link1{
弹性：1；
}
.link2{
弹性：1；
}
.link3{
弹性：2；
}
.link4{
弹性：1；
}
.link5{
弹性：1；
}












实现这一目标最简单、最快捷的方法是使用CSS网格。你甚至不需要使用列表。使用网格模板列将导航栏拆分为5个相等的列：repeat（5，1fr）。这样，中心柱也将始终保持在中心

.bar{
显示：网格；
网格模板列：重复（5，1fr）；
文本对齐：居中；
}
/*仅供演示*/
.演示规模{
显示：网格；
网格模板列：重复（10，1fr）；
文本对齐：居中；
边框：1px纯黑；
边缘顶部：10px；
}
.示范规模组{
填充：5px0；
}
.演示比例分区：第n个子级（偶数）{
颜色：红色；
背景色：白色；
}
.演示比例分区：第n个子项（奇数）{
颜色：白色；
背景色：红色；
}

10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
不确定等距是什么意思。如果有5个，而第三个总是以中间为中心，那么如果文本长度不同，则项目之间的间距可能会有所不同。你能澄清一下吗？澄清一下：我想要任意数量的链接显示在彼此旁边。中间线之间的距离必须相同。（5只是一个例子，因为当链接数量不均匀时很容易可视化）我想他希望第三个链接位于页面的绝对中心。这段代码没有做到这一点。不要使用表格来设计样式。表只能用于显示数据。为了设计样式，可以使用flexbox或css网格，这是现代的解决方案，与表格相比有一些优势。例如，允许完全重复性，更改布局以供移动使用（媒体查询、网格模板区域、灵活订单…），这对任意数量的链接有何影响？在我看来，似乎我必须手动调整collumswell，您可以使用JS计算元素并根据它设置网格列数量。或者，您可以使用3列金额，其中需要声明链接位于中心的左侧或右侧，并声明哪个元素需要位于中心感谢您的回答，但flex:1
对于.links，li
很简单，我想这就是我想要的。设置.links
的宽度并设置flex:1用于。链接ul
。可以