Centering text inside rounded rectangle vertically and horizontally

debugcn Published at Dev

user4515590

I want center text inside rounded rectangle (both vertically and horizontally), and also center this banner on page too, not sure how to make this correctly. The other elements need be centered too. Please advice how to make things correctly. Here is code:

#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>

Itay Ganor

remove width: 450px; and height: 40px from #rcorners.

Otherwise, if you want to keep it 450px wide, you may add margin: auto to #rcorners. It will solve your problem.

@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>

Collected from the Internet

Please contact [email protected] to delete if infringement.