text-align：center不在自定义元素上工作

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?默认情况下，自定义元素显示为内嵌，因此您必须将它们显式设置为显示为块（感谢@showdev）

Answer 2

你想要整个文本在中心..？然后尝试这个。在text-align:center

上添加.modalDialog:target

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

Answer 3

在模态

上设置text-align

<强> 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代码

即可