Question

我尝试将span元素与容器div的中心对齐，并让另一个span在其左边对齐右对齐文字：

+--------------------------------------------------------+
| <div>                                                  |
+----------------------+----------+                      |
| <span>               | <span>   |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
|        right-aligned | centered |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
+----------------------+----------+                      |
|                                                        |
+--------------------------------------------------------+

两个跨度的内容都是动态生成的，所以我希望尽可能避免任何绝对像素宽度。

知道如何实现这种类型的布局吗？

这是我最终根据Persinj的答案进行的标记：

HTML

<nav class="navbar">
  <span class="nav-aside">Right-aligned:&nbsp;</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;
}

由于我的浏览器要求有限，我将供应商前缀从我的标记中删除了，而且我依靠autoprefixer来处理这个问题。如果您需要，请查看接受的答案。

Answer 1

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;（不要忘记在包装后清除）。

Answer 2

这可以使用flex解决。 Fiddle

<强> HTML

<div class="wrapper">
    <div class="aside">
    </div>
    <div class="center">
    </div>
    <div class="not-shown">
    </div>
</div>

<强> CSS

.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;
}
.content {
  flex-grow: 1;
  background: red;
}
.aside {
  text-align: right;
  flex-grow: 1;
  background: Orange;
}
.not-shown {
  visibility: hidden;
  flex-grow: 1;
}

将<span>相对于容器div居中，将另一个范围与其左侧的右对齐文本对齐</span>

2 个答案: