Question

我希望中心文字在圆角矩形内（垂直和水平），并且也将此横幅置于页面中心，不确定如何正确地进行此操作。其他元素也需要居中。请告知如何正确地做事。这是代码：

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

Answer 1

从width: 450px;删除height: 40px和#rcorners。

否则，如果您希望将其保持为450px宽，则可以将margin: auto添加到#rcorners。它会解决你的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要使按钮居中添加margin: 0 auto并使文本居中，您可以轻松地使用flexbox进行操作。代码看起来像：

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

您可以在此处阅读有关使用flexbox进行居中的更多信息：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

我编辑了你的CSS。但我不明白为什么你给#rcorners元素高度。希望这会对你有所帮助

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;
}

垂直和水平对齐圆角矩形内的文本

3 个答案: