Question

我有一个简单的问题。为什么一个不自动的内容大小？比如说：

<html>

    <div style="margin:auto; background:red;">Test</div>

</html>

在width:100%中返回，虽然我希望单词“Test”能够简单居中。有什么想法吗？

Answer 1

您的问题与HTML的基础知识有关。有block elements和inline elements。块级元素本质将始终占据其包含元素的整个宽度。改变这种情况的唯一方法是通过CSS。

如果您希望以边框或背景颜色包装单词，并且仅查找该单词，则需要使用内联元素。例如：

＆＃13;

div,
span {
  border: 1px solid blue;
  }

＆＃13;

<div>Test</div>
<span>Test</span>

＆＃13;

关于使用margin: 0 auto以及它为什么不居中的问题是因为您需要指定宽度。要使用全宽DIV对文本居中，您需要应用text-align: center;。这样您就不必担心可变文本长度了。

＆＃13;

div {
  text-align: center;
  }

＆＃13;

<div>
  Test
</div>

＆＃13;

如果您想要设置单个单词的样式并将其置于DIV视图的下方代码段中：

＆＃13;

div {
  text-align: center;
  }
span {
  border: 1px solid blue;
  }

＆＃13;

<div>
  <span>Test</span>
</div>

＆＃13;

另一种选择是，如果您希望居中文本仅占用包含元素的大部分但仍然居中，您可以执行以下操作：

＆＃13;

.wrap {
  width: 50%;
  margin: 5px auto;
  border: 1px solid blue;
  text-align: center;
  }

＆＃13;

<div>
  <div class="wrap">
    Test
  </div>
  <div class="wrap">
    Test Test Test Test Test Test Test Test Test Test Test Test Test Test
  </div>
</div>

＆＃13;

Answer 2

很简单。默认情况下，div应用了display: block;样式。因此，块的默认行为是100％的父宽度。

Answer 3

<div style="text-align: center">Test</div>

div是100％宽，因为div是块元素，这意味着它们跨越100％宽。您需要将显示设置为内联或内联块，以便“拉伸”以适合内容。

Div自动100％宽

3 个答案: