居中对齐 div 内的所有 p 标签 [重复]答案

【问题标题】：center align all the p tags inside div [duplicate]居中对齐 div 内的所有 p 标签 [重复]
【发布时间】：2021-10-25 20:22:22
【问题描述】：

这是我的代码，我想在所有媒体屏幕尺寸中居中对齐 div 内的所有 p 标签。我该怎么做？

 <div id="thankyou_block">
        <p><br></p>
        <p><br></p>
        <div class="ticket_details">
            <p style="font-weight: 500;">Your concern !</p>
            <p class="case_num" style="font-weight: 500;">Please find the details: Ticket<span id="case_id"></span></p>
            <p>We will take time to review your concern and take necessary actions if needed</p>
        </div>

        <img id="thankyou_img"
            src="thankyou_opendoor.png">
        <div style="display: flex; align-items: center; justify-content: center; margin-top: 30px;">
            <button id="back_to_portal" onclick="back_to_portal()">Back</button>
        </div>

    </div>

【问题讨论】：

你的意思是只使用text-align: center？

标签： javascript html css

【解决方案1】：

为此，您需要添加此代码p {text-align: center}

为了更具体并应用于这段代码，您可以为每个 <p> 元素赋予一些类，并将此代码 {text-align: center} 仅写入该类。

否则，您可以在p {text-align: center} 之前添加thankyou_block id，像这样#thankyou_block p {text-align: center} 将其限制为仅id="thankyou_block"

p {
  text-align: center
}

<div id="thankyou_block">
  <p><br></p>
  <p><br></p>
  <div class="ticket_details">
    <p style="font-weight: 500;">Your concern !</p>
    <p class="case_num" style="font-weight: 500;">Please find the details: Ticket<span id="case_id"></span></p>
    <p>We will take time to review your concern and take necessary actions if needed</p>
  </div>

  <img id="thankyou_img" src="thankyou_opendoor.png">
  <div style="display: flex; align-items: center; justify-content: center; margin-top: 30px;">
    <button id="back_to_portal" onclick="back_to_portal()">Back</button>
  </div>

</div>

【讨论】：

【解决方案2】：

将text-align:center 应用到#thankyou_block：

#thankyou_block{
  text-align:center;
}

<div id="thankyou_block">
        <p><br></p>
        <p><br></p>
        <div class="ticket_details">
            <p style="font-weight: 500;">Your concern !</p>
            <p class="case_num" style="font-weight: 500;">Please find the details: Ticket<span id="case_id"></span></p>
            <p>We will take time to review your concern and take necessary actions if needed</p>
        </div>

        <img id="thankyou_img"
            src="thankyou_opendoor.png">
        <div style="display: flex; align-items: center; justify-content: center; margin-top: 30px;">
            <button id="back_to_portal" onclick="back_to_portal()">Back</button>
        </div>

    </div>

【讨论】：