我如何扩大一段？

Question

我想使段落更宽并且也要保留在页面的中央。

每当我更改段落的宽度时，它都会最终到达页面左侧，如下所示：

这是我的HTML和CSS文件的摘要：

.topheader {
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-top: 80px;
	text-transform: uppercase;
	width: 50px;

<p class="topheader">The best Macbook at your disposal!</p>

我希望我的段落这样保留在中间，但要使段落更宽。

Answer 1

您的p.topheader没什么问题，只有愚蠢的width: 50px完全没有必要。默认情况下，段落占据包含块的宽度，您只需要将其文本居中：

p.topheader {
    text-align: center;
}

您很可能对包含块及其包含块依次具有各种规则，这会使您的布局混乱。您的段落元素没有任何问题，尽管它在语义上不适合它所在的上下文-显然是作为标题。

Answer 2

从100%开始制作宽度50px。它将覆盖段落的默认宽度。

.topheader {
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 1.9em;
	margin-top: 20px;
	text-transform: uppercase;
	width: 100%;

<p class="topheader">The best Macbook at your disposal!</p>

Answer 3

.topheader {
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 2em;
	margin-top: 80px;
	text-transform: uppercase;
	text-align: center;

<p class="topheader">The best Macbook at your disposal!</p>

Answer 4

您可以使用flex来实现。

在图像和段落周围放置包装纸，例如：

<div class="wrapper">
 <p>my paragraph</p>
 <img />
</div>

在CSS中使用：

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center
}