文本对齐：中心不适用于自定义元素

Question

我正在尝试让 text-align: center 在模态中工作。
出于某种原因，它没有在 <hm1> 元素中居中文本。

出了什么问题？

/* custom modal */

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 750px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #f3eedd;
  /*max-height: calc(100vh - 210px);*/
  overflow-y: auto;
  overflow-x: hidden;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}
hm1 {
  font-family: 'Londrina Sketch', cursive;
  color: #c13e18;
  font-size: 50px;
  text-align: center;
  margin: 0px 30px 0px 30px;
}
hm2 {
  font-size: 20px;
  color: #c13e18;
  margin: 10px 30px 10px 30px;
}
hm3 {
  font-size: 20px;
  margin: 30px 30px 0px 30px;
}
pm {
  font-size: 20px;
  margin: 0px 30px 0px 30px;
}

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <hm1>THE BASICS</hm1>
    <hr>
    <hm2>The Box combines brain teasing and practical challenges that are woven into an exciting scripted storyline. You and your guests will be talking of nothing else for days after.</hm2>
    <hr>
    <hm3>What Happens?</hm3>
    <p>You and your guests will be initiated into their teams and primed for the adventure that awaits.</p>
    </br>
    <pm>A table of intricately displayed items will be revealed, leaving it then up to you and your team to decipher and find the many challenging puzzles, riddles and hidden items which will finally decode and unlock The Box. But remember, time is of the
      essence, and you will not only be against our clock, but also the opposing team(s) too!</pm>
    <hm3>Games</hm3>
    <p>So far we have released three of our revolutionary challenging games. Each is different, but all will test you compellingly to your limits. You can browse through our current selection of games <a href="http://www.challenge-the-box.com/games" target="_parent">Here</a>.
      If that's not enough we also offer a <a href="http://www.challenge-the-box.com/wp-content/uploads/build.html">Build Your Own</a> option so we can tailor a game specifically for any occasion or theme you may have.</P>
    </br>
    <p>Our games are recommended for a minimum of 2 players. A maximum number of 4 players per table is recommended otherwise it can get too overcrowded! Each standard game comes with 2 tables. If you'd like more players then you can purchase additional
      ones in the Extra's section of the <a href="http://www.challenge-the-box.com/booking" target="_parent">Booking</a> form.</P>

    <h3>Timing</h3>

    <p>You will have a 30 minute briefing and then exactly ONE hour to solve the clues and challenges upon your teams table, to finally give you the key to unlock The Box</P>
    </br>
    <p>If our games are not already sounding exciting enough as they are, rest assured, your hearts will be pumping with adrenaline as you slowly realising the impending time is also against you.</P>
    </br>
    <p>Tense music will be increasing the excitment as the count down timer gets closer to the end. Remember, you are not only racing against us, you are also against the opposing teams of your party too.</p>
    </br>
    <p>Games with longer time limits are also available. Please see <a href="">Here</a> for more details.</p>

    <h3>Pricing</h3>

    <p>Prices are based on parties of 8. Two tables, two teams of 4– additional tables available at a per additional table cost.</P>

    <h3>Bookings</h3>

    <p>Many have tried, and many have failed.</p>
    </br>
    <p>Do you believe you and your comrades have what it takes?</p>
    </br>
    <p>Do you want to host a revolutionary game that can take place even in your own home?</p>
    </br>
    <p>If yes, then read ahead for more details or fill out our <a href="http://www.challenge-the-box.com/booking" target="_parent">Booking</a> form, but remember, only play, if you want to win!</p>

    <h3>Age Limits & Restrictions</h3>

    <p>Due to the complexity of some of our challenges players must be aged 12+. Disability access is circumstantial to your chosen venue. None of the games include strenuious physical activity but simply rely on intellect and hands on tasks.</P>
    </br>
  </div>
</div>

View on JSFiddle

Answer 1

要使 text-align 正常工作，您需要为元素指定宽度或将它们显示为 block 以便元素获得完整宽度。

您的元素hm1是自定义元素，添加display: block。

hm1 {
    font-family:'Londrina Sketch', cursive;
    color: #c13e18;
    font-size: 50px;
    text-align: center;
    margin: 0px 30px 0px 30px;
    display: block; /* Added HERE */
}

Demo

如您所见Custom tags... why not? by default custom elements are displayed as inline, so you explicitly have to set them to display as block(Thanks to @showdev)

Answer 2

你想让整个文本居中..？然后试试这个。在 .modalDialog:target

上添加 text-align:center

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    text-align:center;
}

Answer 3

设置模式文本对齐

CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    text-align:center;
}

DEMO HERE

Answer 4

只需将 display:block; 添加到您的 hm1 标签

文本对齐：中心不适用于自定义元素

text-align:center not working on custom element

css

modal-dialog

center

text-align