HTML centrar div de nome verticalmente

Joel Martins · 18 de agosto de 2021

Boas,

O meu objetivo é colocar as div assim:

na div1 o user e ft, no div2 o nome e sobrenome

Aqui está o meu código:;

<?php

require"../login/check_point_.php";
require"../connect.php";
require"perfil.php";

?>
<html>
    <head>
        <!--<link rel="stylesheet" href="../navegation_bar_/navegation_bar_.php" type="text/php">-->
        <title><?php echo$_SESSION["username"];?></title>
        <link rel="stylesheet" href="perfil.css">
    </head>
    <body>
        <div class="a">
            <div id="user_img_">
                <img src="<?php echo $img;?>" class="img">
                <h1 class="user" ><?php echo$username;?></h1>
            </div>
            <div id="nmsr">
                <label for="nome">Nome</label>
                <p name="nome"><?php echo $nome." ".$sobrenome;?></p>
            </div>
        </div>
        <!--<div>
            <label>E-mail</label><?php
            
             echo $email;?>
            edit
        </div>
        <div>
            <label>Telefone</label><?php
            
             echo $telemovel;?>
            edit
        </div>
        <div>
            <label>data de nacimento</label><?php
            
             echo $nascimento;?>
            edit
        </div>
        <div>
            <label>Password</label><?php
            
             echo $password;?>
            edit
        </div>-->
    </body>
</html>

CSS:

.a{
    background-color:green;
          position:fixed;
      top:0;
      left:0;
      width:100%;
}

#user_img_{
    background-color:red;
    width:50%;
    float:left;
    
}
.img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:grey;
    border:grey 5px solid;
    border-radius:100% 100% 100% 100%;
    width:200px;
    height:auto;
}
.user{
    display: flex;
        justify-content: center;
}

#nmsr{
    background-color:pink;
    top:200px;
    height:50%;
}
#nmsr label{
    /*color:;*/
    top:200px;
    font-size:5vw;
    margin-left:10px;
}
#nmsr p{
    top:200px;
    margin-left:10px;
}

e com esse código aparece assim:

Agradeço toda a ajuda possível : ))

DeevTech · 24 de agosto de 2021

Vou fazer um exemplo que pode funcionar pra você

<div id="inner">Este é o elemento interno.</div>

</div>

Pode ser usado Margem Automática

#inner { margin: 0 auto; width: 50%; /* Altere para o valor da largura desejada. */ }

Ou Posição Absoluta

#outer { position: relative; width: 100%; } #inner { left: 50%; margin-left: -100px; /* A metade de sua largura. */ position: absolute; width: 200px; /* O valor que você desejar. */ }