Question

我想在每个p标签的新行上显示文本，所以我做了：

<div class="create-holiday">
  <p class="create-holiday-title">Create your holiday activity</p>
  <p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>

.create-holiday *
{
    margin-top: 100px;
    vertical-align: middle;
  text-align: center;
}

.create-holiday-title
{
  width: 297px;
  height: 22px;
  color: #333333;
  font-family: Montserrat;
  font-size: 22px;
  font-weight: 700;
}

.create-holiday-subtitle
{
  width: 276px;
  height: 18px;
  color: #333333;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 300;
}

但是p标签显示在同一行..我做错了什么？

Answer 1

在p标签的中间添加一个br标签，这样它们就不会出现在同一条线上

Answer 2

<p>标记是块级元素，因此您不需要<br>个标记。你的代码似乎对我有用......

＆＃13;

.create-holiday * {
    margin-top: 100px;
    vertical-align: middle;
    text-align: center;
}

.create-holiday-title {
    width: 297px;
    height: 22px;
    color: #333333;
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 700;
}

.create-holiday-subtitle {
    width: 276px;
    height: 18px;
    color: #333333;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 300;
}

＆＃13;

<div class="create-holiday">
  <p class="create-holiday-title">Create your holiday activity</p>
  <p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>

＆＃13;

Answer 3

听起来您的p标签的宽度设置为小于100％和/或您的p标签设置为内联或内联块的显示。

在CSS文件中，试试这个：

p {
    display: block;
    width: 100%;
}

如果这不起作用，你总是可以在每个p标签的末尾添加br标签，但你真的不应该这样做。

Answer 4

<div class="create-holiday">
   <p class="create-holiday-title">Create your holiday activity</p>
   <p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>

.create-holiday * {
   margin-top: 100px;
   display: flex; //make it flex
   align-items: center; //flex middle vertical align
   justify-content: center; //flex center align
}
.create-holiday-title {
   width: 297px;
   height: 22px;
   overflow: hidden; //force p to height and width size
   color: #333333;
   font-family: Montserrat;
   font-size: 22px;
   font-weight: 700;
}
.create-holiday-subtitle {
   width: 276px;
   height: 18px;
   overflow: hidden; //force p to height and width size
   color: #333333;
   font-family: Roboto;
   font-size: 18px;
   font-weight: 300;
}

无法垂直设置

4 个答案: