Question

所以我看了这个关于如何创建一个好的联系我表格的教程。但问题是我无法集中精力。它使用一些网格标签，并且响应迅速。所以我想保持响应，但在全宽时我希望它像徽标一样居中。（HTML和CSS刚刚学习的新手） HTML代码

MessageProperties messageProperties = new MessageProperties();
messageProperties.setHeader("color", "red");
MessageConverter messageConverter = new SimpleMessageConverter();
Message message = messageConverter.toMessage("Hello World !", messageProperties);
rabbitTemplate.send("helloworld.header.x", "", message);

我的CSS

<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">

  <div class="contact">
    <h3>Email Us</h3>
    <form>
      <p>
        <label>Name</label>
        <input type="text" name="name">
      </p>
      <p>
        <label>Company</label>
        <input type="text" name="company">
      </p>
      <p>
        <label>Email Address</label>
        <input type="email" name="email">
      </p>
      <p>
        <label>Phone Number</label>
        <input type="text" name="phone">
      </p>
      <p class="full">
        <label>Message</label>
        <textarea name="message" rows="5"></textarea>
      </p>
      <p class="full">
        <button>Submit</button>
      </p>
    </form>
  </div>
</div>

Answer 1

 @media(min-width: 700px){
.wrapper {
    /* remove this 
     display: grid;
    grid-template-columns: 1fr; */
    display: flex;
    justify-content: center;
}

    *{
  box-sizing: border-box;
}

body{
  background:#92bde7;
  color:#485e74;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:1em;
}

.container{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}

ul{
  list-style: none;
  padding:0;
}

.brand{
  text-align: center;
}

.brand span{
  color:#fff;
}
/* REMOVE */
/*
.wrapper{
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
  padding: 1em;
}
/* REMOVE */
/*
.company-info{
  background:#DA00F0;
}
*/

/*
.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}
*/
.contact{
  background:#f9feff;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}

.contact form label{
  display:block;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact form input, .contact form textarea{
  width:100%;
  padding:1em;
  border:1px solid #c9e6ff;
}

.contact form button{
  background:#c9e6ff;
  border:0;
  text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus{
  background:#92bde7;
  color:#fff;
  outline:0;
  transition: background-color 2s ease-out;
}

/* LARGE SCREENS */
/*Once it passes 700px do this */
@media(min-width:700px){
  .wrapper{
      display: flex;
     justify-content: center;

  }

  .wrapper > *{
    padding:2em;
  }

   .brand .contact{
    text-align: center;
  }


}

<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">

  <div class="contact">
    <h3>Email Us</h3>
    <form>
      <p>
        <label>Name</label>
        <input type="text" name="name">
      </p>
      <p>
        <label>Company</label>
        <input type="text" name="company">
      </p>
      <p>
        <label>Email Address</label>
        <input type="email" name="email">
      </p>
      <p>
        <label>Phone Number</label>
        <input type="text" name="phone">
      </p>
      <p class="full">
        <label>Message</label>
        <textarea name="message" rows="5"></textarea>
      </p>
      <p class="full">
        <button>Submit</button>
      </p>
    </form>
  </div>
</div>

虽然您可以使用margin: auto，但如果您使用代码中未显示的网格，可能会发现奇怪的行为。

进一步阅读：

Answer 2

这段代码可能有所帮助，基本上我已经删除了影响表单容器的代码，并添加了它以便在单个字段中响应。

<强> CSS：

*{
  box-sizing: border-box;
}

body{
  background:#92bde7;
  color:#485e74;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:1em;
}

.container{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}

ul{
  list-style: none;
  padding:0;
}

.brand{
  text-align: center;
}

.brand span{
  color:#fff;
}
/* REMOVE */
/*
.wrapper{
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
  padding: 1em;
}
/* REMOVE */
/*
.company-info{
  background:#DA00F0;
}
*/

/*
.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}
*/
.contact{
  background:#f9feff;
  max-width: 680px;
  margin: auto;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}

.contact form label{
  display:block;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact form input, .contact form textarea{
  width:100%;
  padding:1em;
  border:1px solid #c9e6ff;
}

.contact form button{
  background:#c9e6ff;
  border:0;
  text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus{
  background:#92bde7;
  color:#fff;
  outline:0;
  transition: background-color 2s ease-out;
}

@media screen and (max-width: 680px) {
  .contact{
    max-width: inherit;
  }
  .contact form {
    display: block;
  }
}

示例： https://jsfiddle.net/8dvch6nj/

Answer 3

根据您是否想要将整个块保持为网格格式，您可以随时更改.wrapper以不使用网格，但只有0px auto的边距。如果您仍想使用网格布局，则可以将.wrapper更改为宽度为100％

＆＃13;

    *{
  box-sizing: border-box;
}

body{
  background:#92bde7;
  color:#485e74;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:1em;
}

.container{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}

ul{
  list-style: none;
  padding:0;
}

.brand{
  text-align: center;
}

.brand span{
  color:#fff;
}
/* REMOVE */
/*
.wrapper{
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
*/
.wrapper > *{
  padding: 1em;
}
/* REMOVE */
/*
.company-info{
  background:#DA00F0;
}
*/

/*
.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}
*/
.contact{
  background:#f9feff;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}

.contact form label{
  display:block;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact form input, .contact form textarea{
  width:100%;
  padding:1em;
  border:1px solid #c9e6ff;
}

.contact form button{
  background:#c9e6ff;
  border:0;
  text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus{
  background:#92bde7;
  color:#fff;
  outline:0;
  transition: background-color 2s ease-out;
}

/* LARGE SCREENS */
/*Once it passes 700px do this */
@media(min-width:700px){
  .wrapper{

    display: grid;
    grid-template-columns: 100%;

  }

  .wrapper > *{
    padding:2em;
  }

   .brand .contact{
    text-align: center;
  }


}

＆＃13;

<div class="container">
<h1 class="brand"><span>Acme</span> Web Design</h1>
<div class="wrapper animated bounceInLeft">

  <div class="contact">
    <h3>Email Us</h3>
    <form>
      <p>
        <label>Name</label>
        <input type="text" name="name">
      </p>
      <p>
        <label>Company</label>
        <input type="text" name="company">
      </p>
      <p>
        <label>Email Address</label>
        <input type="email" name="email">
      </p>
      <p>
        <label>Phone Number</label>
        <input type="text" name="phone">
      </p>
      <p class="full">
        <label>Message</label>
        <textarea name="message" rows="5"></textarea>
      </p>
      <p class="full">
        <button>Submit</button>
      </p>
    </form>
  </div>
</div>

＆＃13;

我如何以html格式为中心？

3 个答案: