时间戳

首页 > 解决方案 > 居中对齐 div 内的所有 p 标签

javascript - 居中对齐 div 内的所有 p 标签

问题描述

这是我的代码，我想在所有媒体屏幕尺寸中居中对齐 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>

标签： javascripthtmlcss

解决方案

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

要更具体地应用到这段代码，您可以为每个<p>元素提供一些类，然后{text-align: center}只将此代码写入该类。

否则，您可以像这样添加thankyou_blockid以将其限制为仅p {text-align: center}#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>

推荐阅读