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

Posted 2023-04-13

【中文标题】居中对齐 div 内的所有 p 标签 [重复]

【英文标题】：center align all the p tags inside div [duplicate]

【发布时间】：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？

【参考方案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>