I'm trying to get text-align: center to work inside a modal.
For some reason, it's not centering text in the <hm1> element.
What is going wrong?
/* 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>For text-align to work, you need to give width to the element or display them as block so that the element will get full width.
Your element hm1 is custom element, add display: block to this.
hm1 {
font-family:'Londrina Sketch', cursive;
color: #c13e18;
font-size: 50px;
text-align: center;
margin: 0px 30px 0px 30px;
display: block; /* Added HERE */
}
As you can see here 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)