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

标签 html css vaadin

你能帮我把按钮放在水平布局的底部中心吗?见下图。 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>

enter image description here

最佳答案

上面的动态<div>如果它定位为随文档流动(不是绝对的或固定的),则不会有什么不同。

你的屁股<div>应具有 CSS 属性 text-align: center;应用于它。您可能已经知道,这将内联元素集中在 <div>

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

确保他们没有 float应用于它们的属性,否则它们将根据此声明对齐。

请看下面的 fiddle

.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>

关于html - 如何将内容定位在布局的底部中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37609634/

相关文章:

java - Vaadin 请求带有过滤器链的过滤器?

html - 无法获得在 ul 上工作的链接,页面上的其他人工作正常

javascript - 如何在 AJAX 调用中添加 loading.. 消息?

javascript - jQuery appendTo 与 html()

另一个下的 CSS anchor ,两者都是空的以在 javascript 中设置动画

java - Vaadin Spring PLupload-Addon 上传文件失败

javascript - 在 slideUp jQuery 上跳转

javascript - 如何获取 "declared"CSS 值,而不是计算出的 CSS 值

javascript - 将输入标签制作成下拉列表

java - vaadin 7.75 如何将组合框添加到网格中?