将相对于容器div居中，将另一个跨度与其左侧的右对齐文本对齐

I'm trying to align a span element in the center of a container div, and have another span with right-aligned text aligned left of it:

我正在尝试将span元素与容器div的中心对齐,并使另一个跨度与右对齐文本对齐:

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

The contents of both spans are dynamically generated, so I'd like to avoid any absolute pixel widths if possible.

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

Any idea how to achieve this type of layout?

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

Here is the markup I eventually went with based on Persinj's answer:

这是我最终根据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;
}

I left the vendor prefixes out of my markup since I have limited browser requirements, and I'm relying on autoprefixer to take care of that. Please see the accepted answer if you need them.

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

2 个解决方案

#1

This can be sloved using flex. Fiddle

这可以使用flex解决。小提琴

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;
}

#2

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;
}

Alternatively, use display: block and float: left; on your spans (don't forget to clear after the wrapper).

或者,使用display:block和float:left;你的跨度(不要忘记在包装后清除)。

#1