2017-10-13 8 views
1

Ich habe eine Tabelle in HTML erstellt und möchte etwas Text innerhalb eines Tags hinzufügen und zentrieren. Mein Code so weit:Zentrieren Sie Text in Tag

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";
html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
} 
 

 
#fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}
<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Wenn ich führen Sie den Code der Text immer ganz oben auf der Seite ist statt im absoluten Zentrum. Ich versuche auch einen Weg zu finden, den Text unabhängig von der Bildschirmgröße zu zentrieren. Jeder Rat wird sehr geschätzt!

Antwort

2

hinzufügen align-items: center; zu .mainScreen

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";
html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
align-items: center; 
 
} 
 

 
#fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}
<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

+0

Bitte nicht vergessen, es als hilfreich zu markieren, viel Spaß. –

0

Sie die <table> auch Zentrum könnte:

document.getElementsByClassName("mainScreen")[0].style.display = "flex"; 
 
document.getElementById("fixation").style.display = "block";
html, 
 
body, 
 
.mainScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.mainScreen { 
 
    display: flex; 
 
} 
 

 
table, #fixation { 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}
<div class="mainScreen" style="display:none"> 
 
    <table align="center"> 
 
    <tbody> 
 
     <tr> 
 
     <td id="fixation" style="text-align:center;">+</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>