CSS文本对齐在内联块元素上的应用

Question

我有这样一个结构：

<div class="father">
 This string is left-aligned
 <div class="divToCenter" style="display:inline-block;">
  //contains other divs.I used inline block for making this div as large as 
  //content ATTENTION: its width is not fixed! 
 </div>

</div>

我该如何表述：

让"father" div中仅名为"divToCenter"的类居中显示。

谢谢

Luca

- luca

---

Div元素始终会根据其内容进行拉伸，直到达到其直接父元素的边界。不需要使用display:inline-block;。 - Krimo

父div更大，它的宽度是固定的，因此divToCenter倾向于扩展到其父元素的宽度。 - luca

Answer 1

#left {
  float: left;
   background: #eee;
   width: 200px; /* width is optional */
}
#content {
  overflow: hidden;
  text-align: center;
}

    <div class="father">
     <div id="left">This string is left-aligned</div>
     <div id="content">
      <!-- contains other divs.I used inline block for making this div as large as content -->
     </div>
    </div>

将左对齐的字符串或块向左浮动，然后使用overflow:hidden在内容上，它将自动占据剩余空间，您可以根据需要text-align它。

要么将左侧内容也转换为内联块，使其与内容并排，然后您就能够分别text-align每个inline-block。

- clairesuzy

---

是的，谢谢！我也把“wrap-left-aligned-content”解决方案作为最后的资源保留了下来。我认为应该有一个CSS选择器可以使用我的自定义结构而无需进一步修改，但我想我错了=) - luca

我看到你在另一个回答中留下的jsfiddle示例，我认为将左对齐包装起来是最好的解决方案，因为您无法通过其他方式定位父div的"text node"部分。 - clairesuzy

Answer 2

div.divToCenter
{
margin: 0 auto;
}

- Jawad

---

你是想让 div 中的文本居中显示（如 text-align），还是让整个 div 居中显示？这是两种不同的情况！ - Jawad

我想让div居中显示...(顺便说一下，div的大小与其内容实际大小相同，因此无法对齐内容) - luca

@JAA149 我之前也尝试了你的建议，但它并没有起作用。我添加了 "!important" 来确保不会发生覆盖。如果我将 "text-align" 属性应用于父 div，那么所有文本（包括 divToCenter）都会居中。但我只想让 div 居中。 - luca

要使用margin:0 auto，您还需要定义div的宽度。 - Tristar Web Design

Answer 3

.father { text-align: center; }
.father div.divToCenter { margin: 0 auto; }

更新：

.father { text-align: left; }
.father div.divToCenter { width:Xpx; margin: 0 auto; }

- Mousa

---

如我之前所写，如果我将"text-align"属性应用于父div，则所有文本（包括divToCenter）都居中对齐。但我只想让div居中。 - luca

我已经更新了我的帖子，希望能够满足您的要求，只需设置内部div的宽度属性，以确保自动边距被激活。 - Mousa

divToCenter的宽度是动态的，不是固定的。谢谢！我想我会使用“左侧内容换行”解决方案。 - luca