Html 对齐底部栏元素

您好，我正在尝试对齐底部栏元素，以便它们位于102侧的两列中。我想知道是否有办法修复它，因为它们目前都在右侧浮动。我是一个初学者html css程序员，我还不是很有经验。我很感激你能给我的任何帮助

CSS HTML

关于我们
附属公司


托斯

最终结果

想要的结果

我做过这样的东西。是新的HTML5标准之一，你应该看看。在您的情况下，使用网格与flex相比是更好的选择，因为您正在寻找类似于表格的结构

我选择将您的需求分为两部分：

将你的标志居中

为链接制作一个2列网格

居中设置您的徽标

我们需要使一个元素居中，并防止它干扰我们的传入链接网格。因此，我们将使用

位置：relative

设置容器，并将

img

标记置于

位置：absolute

中。请注意，图像的

顶部

右侧

底部

左侧

属性现在相对于定位为

相对

的第一个父对象

所以我们只需要做一些简单的数学。请注意calc（）函数，我们不希望将徽标的左上角居中，而是将其居中。因此，我们需要删除已定义徽标宽度的一半

navbarlogo2 {
  left: calc(50% - 60px);
}

为链接制作一个两列网格

为了生成网格，您必须将容器显示为网格，并将其

网格模板列设置为
1fr 1fr
。你可以用分词翻译
fr
。在这里，我们要求把一行分成两个分数。
因为我们想为我们的徽标找个位置，所以我们在out容器中添加了一个间隙（
网格帽
），以便在两列之间留出一些空间。
了解更多有关fr单元的信息


正文{
保证金：0
}
.底部导航{
宽度：100%；
背景色：rgb（248138 180）；
位置：相对位置；
}
.导航条2{
显示：块；
左边距：自动；
右边距：自动；
宽度：120px；
文字装饰：无；
位置：绝对位置；
滤光片：亮度（10）；
顶部：15px；
左：计算（50%-60px）/*居中左上角，然后移除一半徽标宽度（120px）*/
}
/*底线*/
.导航{
显示：网格；
栅极间隙：120px；
网格模板柱：1fr 1fr；
}
美国海军{
左侧填充：0；
}
李国荣先生{
列表样式：无；
文本对齐：居中；
左侧填充：0；
}
左边
.对{
弹性：1；
}


关于我们
附属公司


托斯
第四


<div class="bottomnav">
            <ul class="bottomlogo">
                <li class="navbarimg2"><img class="navbarlogo2" src="img/LOGO.png"></li>
            </ul>

            <div class='nav'>
                <div class='left'>
                  <ul>
                    <li>About Us</li>
                    <li>Affiliates</li>
                  </ul>
                </div>
                <div class='right'>
                  <ul>
                    <li>TOS</li>
                  </ul>
                </div>
              </div>
        </div>

navbarlogo2 {
  left: calc(50% - 60px);
}