我正在尝试将一个span
元素对齐在容器div
的中心,并让另一个span
右对齐的文本左对齐:
+--------------------------------------------------------+
| <div> |
+----------------------+----------+ |
| <span> | <span> | |
| | | |
| | | |
| | | |
| right-aligned | centered | |
| | | |
| | | |
| | | |
| | | |
+----------------------+----------+ |
| |
+--------------------------------------------------------+
两个跨度的内容都是动态生成的,因此如果可能的话,我想避免任何绝对像素宽度。
知道如何实现这种类型的布局吗?
以下是我最终根据Persinj的答案使用的标记:
.HTML
<nav class="navbar">
<span class="nav-aside">Right-aligned: </span>
<span class="nav-menu">centered</span>
<span class="nav-aside"></span>
</nav>
.CSS
nav.navbar {
display: flex;
}
span.nav-aside {
flex-grow: 1;
flex-basis: 0;
text-align: right;
}
span.nav-menu {
align-self: center;
text-align: center;
}
由于浏览器要求有限,我将供应商前缀排除在我的标记之外,并且我依靠自动前缀器来处理这个问题。如果您需要,请参阅接受的答案。
弹性框设计/布局
这可以使用flex进行切割:
设置树框:旁边,中心和一个隐藏的,将填充所需的空间。
设置flex-grow
将使它们占据页面的不同部分。
在每个上设置flex-grow: 1;
将使它们占用相同的空间。将其中一个设置为flex-grow: 0.5
;会给这部分更少的成长空间。
添加一个带有 flex 属性的包装器,我们可以align-items:center
来确保它们位于包装器的中心。
小提琴
.wrapper {
height: 250px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
text-align: center;
}
.center,
.aside,
.not-shown {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.center {
flex-grow: 0.5;
background-color: lightblue;
height: 50px;
}
.aside {
text-align: right;
background-color: 1;
background: lightgreen;
height: 50px;
}
.not-shown {
visibility: hidden;
flex-grow: 1.5;
height: 50px;
}
<div class="wrapper">
<div class="aside">
aside
</div>
<div class="center">
center
</div>
<div class="not-shown">
</div>
</div>
HTML:
<div class="wrapper">
<span class="span-left">right-aligned</span>
<span class="span-center">centered</span>
</div>
.CSS:
.span-left, .span-center { display: inline-block; }
.span-left {
width: 40%;
text-align: right;
}
.span-center {
width: 20%;
text-align: center;
}
或者,在跨度上使用display: block
和float: left;
(不要忘记在包装器后清除)。