Question

您可以帮我将按钮放在水平布局的底部中央，请参见下图。 Ps：顶部垂直布局具有动态高度。

这是我的HTML代码：

<html>

<body>
<div class="container" style="height: 100%">

<div class="v-panel-content v-panel-content-task-search-list-view v-scrollable" tabindex="-1"
     style="position: relative; height: 100%; width: 275px; border-radius: 10px; border-style: none;">
    //-----------------------Vertical Layout
    <div location="loc1"></div>
    <div location="loc2" style="margin-left: 8px;"></div>
    <div location="loc3"></div>
    <div location="loc4"></div>
    //-----------------------HorizontalLayout
    <div location="buttonLayout"></div>
</div>
</div>
</body>
</html>

Answer 1

上述<div>的动态性如果定位于与文档一起流动（不是绝对的或固定的），则不会产生影响。

您的底部<div>应该应用CSS属性text-align: center;。您可能已经意识到，这会集中<div>

中的内联元素

由于您的按钮可能不是内嵌元素，我们需要将它们设置为display: inline-block;。这将定位它们，因为文本将位于其父元素中。

确保他们没有应用float属性，否则他们将根据此声明进行对齐。

见下面的小提琴

.lower {
  text-align: center;
  }

.button-lower {
  display: inline-block;
  padding: 5px;
  background: green;
  }

<div class="lower">
  <a class="button-lower" href="#">Vider</a>  
  <a class="button-lower" href="#">Chercher</a>
  </div>

如何在布局的底部中心定位内容

1 个答案: