HTML:
<body>
<table class="Cabecalho" width="100%">
<tr>
<th width="33%"><a href="Home.html">Home</a></th>
<th width="33%"><a href="PaginaContato.html">Atendimento</a></th>
<th width="33%"><a href="Empresas.html">Empresas Filiadas</a></a></th>
</tr>
</table>
<br><br><br><br>
<div class="textored centro"><br>
Empresa
<br><br>
<select required>
<option value="Intel">Intel</option>
<option value="AMD">AMD</option>
<option value="NVIDIA">NVIDIA</option>
<option value="Oi">Oi</option>
<option value="Vivo">Vivo</option>
<option value="Tim">Tim</option>
<option value="Claro">Claro</option>
<option value="NET">NET</option>
</select><br><br>
Assunto
<br>
<select id="assunto" onchange="f(this)">
<option value="info">Informações</option>
<option value="elog">Elogio</option>
<option value="recl">Reclamação</option>
<option value="suge">Sugestão</option>
<option value="outro">Outro</option>
</select><br><br>
<div id="mOutro" style="display:none"></div>
<textarea rows="5" cols="40" id="tOutro" style="display: none;"></textarea><br id="pulaLinha" style="display:none">
Digite sua mensagem <br><br>
<textarea required rows="10" cols="40"></textarea><br><br>
<button type="button" id="submit" onclick="botao()";">Enviar</button><br><br>
</div>
</body>
CSS:
<style type="text/css">
body {
background-image: url("http://www.forhdwallpapers.com/wp-content/uploads/2015/08/technology-wallpapers-hd-and-technology-background-22.jpg");
}
.Cabecalho{
background-color: rgba(0,0,0,0.5);
border-style: dashed;
text-align: match-parent;
border-color: darkorange;
}
a:link {
color: darkorange;
}
a:hover{
color: orange;
}
a:visited{
color: #ff5f1c;
}
.textored {
color: white;
background-color: rgba(0,0,0,0.5);
}
div {
font-weight: bold;
}
.centro{
text-align: center;
}
</style>
Javascript:
<script>
function f(g){
if(g.options[g.selectedIndex].value == 'outro'){
document.getElementById('mOutro').style.display = 'block';
document.getElementById('mOutro').innerHTML += "Especifique seu assunto <br><br>"
document.getElementById('pulaLinha').style.display = 'block'
document.getElementById('tOutro').style.display = 'block';
}else{
document.getElementById('mOutro').style.display = 'none';
document.getElementById('mOutro').innerHTML = ""
document.getElementById('pulaLinha').style.display = 'none'
document.getElementById('tOutro').style.display = 'none';
}
}
function botao(){
document.getElementById('submit').onclick = location.href='PaginaFim.html';
}
</script>
All code is in the same file.
When the subject tag is "other", a textarea will appear asking you to specify the subject, and this textarea (ID: tOutro) is not aligned with the div.
I've tried using text-align: center; in the tag but it did not work and I'm out of ideas.
If you want to test to understand what I'm saying more easily:
Just put the subject as another to view.