你能帮我把按钮放在水平布局的底部中心吗?见下图。 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>
最佳答案
上面的动态<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/