相关疑难解决方法(0)

我需要在div中居中一个左对齐文本块,但我需要将文本块的视觉宽度放在居中而不是块本身.

在许多情况下,这可能是相同的,但想想一个div相当狭窄的情况(想想移动宽度)和文本太长而无法放在一条线上,所以它需要溢出.

在下面的示例中,我将文本块显示为浅蓝色来说明,但实际上它们将与父div(白色)颜色相同.在使用的任何文本中也没有换行符.

在1a中,文本只有一行,并且小于文本块的最大宽度,因此我可以将文本块设置为文本的宽度,并且没有问题.

但是,在2a中,文本比最大宽度长,因此包裹到下一行.这样做的结果是可见文本块不再出现居中.

如何仅使用HTML和CSS 将这两种情况显示为1b和2b？

编辑1:似乎每个人都在告诉我如何实现1a和2a中的情况,但我已经有了.我想实现1b和2b的情况.

编辑2:我使用的代码与David在其链接中提供的代码基本相同(http://jsfiddle.net/davidThomas/28aef/).对文本区域使用颜色只是为了说明这一点.如果将其更改为白色(http://jsfiddle.net/28aef/2/),您可以看到文本块不再看起来居中(即左右边距不相等)

我想弄清楚flexbox如何工作(应该工作？...),如下所示:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage …

inline-block如果由于屏幕宽度导致内容换行,如何获得适合其内容宽度的元素？

<!-- parent inline-block -->
<div style='display: inline-block;'>
    <div style='display: inline-block; width:200px;'></div>
    <!--
        If this child line breaks, 
        two 200px wide blocks are stacked vertically.
        That should make the parent width 200px,
        but the parent stays much wider than that
    -->
    <div style='display: inline-block; width:200px;'></div>
</div>

我想不出如何用这句话来说这听起来很容易,但我把一个简单的JSFiddle放在一起说明.

#wide {
  position: relative;
  width: 100%;
  border: 1px solid black;
  padding: 5px;
}
#narrow {
  position: relative;
  width: 175px;
  border: 1px solid black;
  padding: 5px;
}
.wrap {
  display: inline-block; …

我希望有一个div给定max-width的宽度与其孩子的宽度紧密相符span.只要span只有一行,一切正常,但一旦换行,父级div将具有最大宽度.

.content {
  margin: 10px;
  max-width: 150px;
  border: 1px dotted black;
  display: inline-block;
}

<div class="content">
  <span>1 line works</span>
</div>
<br>
<div class="content">
  <span>2 lines dont workworkwork</span>
</div>

第一个div紧密贴合,然而第二个div设置在最大宽度 - 但它可能更紧,我希望它更紧.另见我的笔http://codepen.io/sheinzle/pen/gpVjbG

甚至可以在HTML中获得更紧密的契合度？