Centrer le texte à l'intérieur du rectangle arrondi verticalement et horizontalement

Je souhaite que le texte du centre se trouve à l'intérieur du rectangle arrondi (verticalement et horizontalement), et centrer également cette bannière sur la page, mais je ne sais pas comment procéder correctement. Les autres éléments doivent être centrés aussi. S'il vous plaît, conseillez comment faire les choses correctement. Voici le code:Centrer le texte à l'intérieur du rectangle arrondi verticalement et horizontalement

#wrapper { 
 
    position: relative; 
 
    width: 80%; 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#rcorners { 
 
    border-radius: 15px; 
 
    border: 6px solid #ffffff; 
 
    padding: 20px; 
 
    width: 450px; 
 
    height: 40px; 
 
} 
 

 
body { 
 
    background-image: url(images/blaunew.png); 
 
    background-color: #001b33; 
 
    color: #ffffff; 
 
    font-family: 'Roboto'; 
 
    font-size: 14px; 
 
} 
 

 
#rcorners { 
 
    font-family: 'Roboto'; 
 
    font-size: 48px; 
 
    font-weight: 700; 
 
    font-style: normal; 
 
    Helvetica, 
 
    sans-serif; 
 
} 
 

 
p { 
 
    font-family: 'Roboto'; 
 
    font-size: 32px; 
 
    Helvetica, 
 
    sans-serif; 
 
} 
 

 
.main { 
 
    margin-top: 20%; 
 
    //font-size: 35px;  
 
} 
 

 
footer { 
 
    font-size: 14px; 
 
}

<head> 
 
    <title>centered construction</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> 
 

 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div class="main"> 
 
     <h1 id="rcorners">Centered Text No1</h1> 
 
     <p>LOREM IPSUM DOLOR </p> 
 
    </div> 
 

 
    <footer> 
 
     <div>&copy; Lorem Ipsum Dolor </div> 
 
    </footer> 
 
    </div>

Source

2017-03-13 minto

enlever width: 450px; et height: 40px de #rcorners. Sinon, si vous souhaitez conserver une largeur de 450 pixels, vous pouvez ajouter margin: auto à #rcorners. Cela résoudra votre problème.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); 
 

 
#wrapper { 
 
    position: relative; 
 
    width: 80%; 
 
    margin: auto; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#rcorners { 
 
    border-radius: 15px; 
 
    border: 6px solid #ffffff; 
 
    padding: 20px; 
 
    /* width: 450px; 
 
    height: 40px;  */ 
 
} 
 
body { 
 
    background-image: url(images/blaunew.png); 
 
    background-color: #001b33; 
 
    color: #ffffff; 
 
    font-family: 'Roboto';font-size: 14px; 
 
} 
 
#rcorners { 
 
    font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif; 
 
} 
 
p { 
 
    font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; 
 
} 
 

 
.main { 
 
    margin-top: 20%; 
 
//font-size: 35px;  
 
} 
 

 
footer { 
 
    font-size: 14px; 
 
}

<div id="wrapper"> 
 
    <div class="main"> 
 
     <h1 id="rcorners">Centered Text No1</h1> 
 
     <p>LOREM IPSUM DOLOR </p> 
 
     </div> 
 

 
    <footer> 
 
     <div>&copy; Lorem Ipsum Dolor </div> 
 
     </footer> 
 
</div>

Source

2017-03-13 11:20:37

Sinon limiter la largeur du bouton, il se dilate jusqu'à la largeur de '# wrapper' (1066px) – minto

Pour centrer le bouton ajouter margin: 0 auto et centrer le texte que vous pouvez facilement le faire avec FlexBox je pense. Le code ressemblera à quelque chose comme:

#rcorners { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto; 
}

Vous pouvez en savoir plus sur le centrage avec FlexBox ici: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Source

2017-03-13 11:34:46 Ninjabin

je modifier votre CSS. mais je ne comprends pas pourquoi vous avez donné de la hauteur sur votre élément #rcorners. Espérons que cela vous aidera

CSS

#wrapper { 
    position: relative; 
    width: 80%; 
    margin: auto; 
    text-align: center; 
    vertical-align: middle; 
} 

#rcorners { 
    border-radius: 15px; 
    border: 6px solid #ffffff; 
    padding: 20px; 
    width: 450px; 
    /*height: 40px; */ /*it is less height for 2 line text*/ 
} 
body { 
    background-image: url(images/blaunew.png); 
    background-color: #001b33; 
    color: #ffffff; 
    font-family: 'Roboto';font-size: 14px; 
} 
#rcorners { 
    font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif; 
} 
p { 
    font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; 
} 

.main { 
    margin-top: 20%; 
    margin-left: auto; 
    margin-right: auto; 
    display: inline-block; 
    width: auto; 
/*font-size: 35px; */  
} 

footer { 
    font-size: 14px; 
}

Source

2017-03-13 11:35:17

@minto vous avez des données dynamiques que vous voulez aligner le centre (vertical ou horizontal)? –

Juste du texte statique. – minto

@minto, mais dans ce texte div est l'alignement horizontal et vertical. Qu'est-ce que tu veux exactement? –

Centrer le texte à l'intérieur du rectangle arrondi verticalement et horizontalement

Répondre

Questions connexes