边距自动不在弹性项目居中

时间：2019-05-23 22:36:32

标签： css css3 flexbox

我正在尝试将联系人区域中的文本区域居中放置，最大宽度为1400px；在此宽度下，我将textarea的宽度从100％更改为90％。联系人部分位于页脚中页面的底部。文本区域是一个弹性项目，并以align-items: center为中心，但是当我将宽度更改为90％时，它向左倾斜吗？我尝试左/右保证金：自动；发生了什么事？

https://jsfiddle.net/yat5ncmk/9/

p.s媒体查询位于CSS的底部

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.b1,
.b2,
.b3 {
  width: 70px;
  height: 8.5px;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 10px;
  transition: all .15s ease;
}

.b1 {
  background-color: #56ff47;
}

.b3 {
  background-color: #ff4c4c;
}


a:hover {
  color: #007001;
}

.info-wrap {
  flex-basis: 60%;
}

.info {
  font-family: 'Cedarville Cursive';
  color: white;
  font-weight: bold;
  font-size: 4.5rem;
  text-align: center;
  margin-top: 60px;
}


.arrow-right {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 60px solid green;
  position: relative;
  top: -10px;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 60px solid limegreen;
  position: relative;
  top: 20px;
}

.arrow-top {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 60px solid #20a04b;
  position: relative;
  top: -100px;
  left: 60px;
}

.top-middle {
  position: relative;
  top: -110px;
}

.bottom-middle .arrow-left {
  top: -40px;
}

.bottom-middle .move {
  top: -70px;
}

.bottom {
  position: relative;
  top: -48px;
}

.bottom .arrow-left {
  top: -40px;
}




/*---------------FOOTER---------------*/

.contact-section-background {
  background-color: #666;
  height: 300px;
  clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: -100px;
}

.contact-section {
  display: flex;
  background-color: #595959;
  margin-top: -225px;
  position: relative;
  padding-bottom: 18px;
  z-index: 1;
}

.contact,
.location {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact h1,
.location h1 {
  margin: 0;
  font-family: 'Cedarville Cursive';
  color: white;
  font-size: 7rem;
}

.hex {
  -webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
  background-color: #17a832;
  transform: rotate(180deg);
  width: 300px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.rhombus {
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: #17a832;
  width: 80px;
  height: 80px;
  position: absolute;
  margin: 0 auto;
  top: 60px;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.back-to-top {
  color: #595959;
  font-size: 2.5rem;
  left: -45px;
  position: relative;
  transform: rotate(180deg);
  top: 110px;
  font-family: 'Josefin Sans';
}

.btp-arrow {
  color: #595959;
  font-size: 3rem;
  position: absolute;
  left: 50%;
  margin-left: -24px;
  bottom: 35px;
  transition: all .2s ease;
}

.btp-arrow:hover {
  color: #ddae1a;
  cursor: pointer;
  transform: scale(1.1);
}

.contact p {
  font-family: 'Josefin Sans';
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 10px;
  color: white;
}

.textarea {
  position: relative;
  min-width: 500px;
}

.contact textarea {
  resize: none;
  width: 100%;
  color: #595959;
  margin: 10px;
  min-height: 150px;
  font-family: 'Josefin Sans';
  font-size: 1.5rem;
  padding: 5px;
  outline: none;
  border: none;
  background: #474646;
  border-radius: 4px;
}

.contact button {
  font-size: 1.5rem;
  font-family: 'Josefin Sans';
  background: darkgrey;
  color: #595959;
  padding: 4px;
  padding-right: 6px;
  padding-left: 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: -20px;
  transition: all .4s ease;
}

.contact button:hover {
  color: #ddae1a;
}

.contact-line {
  margin-top: 170px;
  margin-bottom: 30px;
  width: 5px;
  border-radius: 3px;
  height: 350px;
  background: #ddae1a;
  position: relative;
}

.links {
  display: flex;
  position: relative;
  max-width: 400px;
  top: -5px;
  left: 7px;
}

.links i {
  font-size: 2.5rem;
  margin-right: 15px;
}

.links p {
  font-size: 1.5rem;
  margin-right: 30px;
  margin-top: 8px;
}

#facebook {
  color: #3b64ed;
  cursor: pointer;
}

#twitter {
  color: #5effeb;
  cursor: pointer;
}

#yelp {
  color: red;
  cursor: pointer;
}

.contact-design-wrap-left {
  position: absolute;
  left: 0;
  top: 40px;
  max-height: 500px;
}

.contact-design-wrap-right {
  position: absolute;
  bottom: 55px;
  right: 0;
  transform: rotate(180deg);
}

.contact-design-wrap-left .bottom {
  height: 0;
}

#align {
  position: absolute;
  left: 70px;
  top: -15px;
}

#align2 {
  position: absolute;
  left: 68px;
  top: -5px;
}

.grey {
  border-left: 60px solid #666;
}

.light-grey {
  border-right: 60px solid #848484;
}

.same {
  border-left: 60px solid #848484;
}

.lighter {
  border-right: 60px solid #a8a3a3;
}

.map {
  position: relative;
  top: 50px;
}

.map i {
  position: absolute;
  color: #ddae1a;
  font-size: 4rem;
  left: 50%;
  margin-left: -24px;
}

.location .map .street-1 {
  width: 300px;
  position: relative;
  top: 95px;
  left: 170px;
  height: 15px;
  transform: rotate(90deg);
  background-color: #848484;
  border-radius: 5px;
}

.location .map .street-2 {
  width: 300px;
  position: relative;
  top: 80px;
  left: -170px;
  height: 15px;
  transform: rotate(90deg);
  background-color: #848484;
  border-radius: 5px;
}

.location .map .street-3 {
  margin-top: 40px;
  width: 190%;
  position: relative;
  top: 30px;
  left: -140px;
  height: 18px;
  background-color: #848484;
  border-radius: 8px;
}

.street-info {
  color: white;
  position: absolute;
  font-family: 'Josefin Sans';
  font-size: 1.2rem;
  left: 20px;
  padding-top: 3px;
}

.address {
  position: absolute;
  left: 50%;
  top: 75px;
  margin-left: -68.5px;
  color: #ddae1a;
  text-decoration: none;
  font-family: 'Josefin Sans';
  font-size: 1.2rem;
  text-align: center;
}

.address:hover {
  color: #ddae1a;
  text-decoration: underline;
}

.copyright {
  position: absolute;
  bottom: 0;
  left: 50%;
  font-family: 'Josefin Sans';
  color: #a8a3a3;
  font-size: 1.8rem;
  padding-bottom: 5px;
  margin: 0 0 0 -253.89px;
}


/*----FOOTER----*/

@media screen and (max-width: 1700px) {
  #align {
    position: absolute;
    left: 60px;
    top: -10px;
  }
  #align2 {
    position: absolute;
    left: 58px;
    top: 0px;
  }
  .contact-design-wrap-right {
    position: absolute;
    bottom: 40px;
    right: 0;
    transform: rotate(180deg);
  }
  .contact h1,
  .location h1 {
    font-size: 6rem;
    height: 160px;
  }
  .contact p {
    font-size: 1.5rem;
  }
  .contact-line {
    margin-top: 160px;
    margin-bottom: 30px;
    width: 5px;
    border-radius: 3px;
    height: 270px;
    background: #ddae1a;
    position: relative;
  }
  .copyright {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-family: 'Josefin Sans';
    color: #a8a3a3;
    font-size: 1.5rem;
    padding-bottom: 5px;
    margin: 0 0 0 -211.99px;
  }
  .contact textarea {
    margin-top: 0;
  }
  .location .map .street-2 {
    width: 280px;
    position: relative;
    top: 60px;
    left: -170px;
    height: 15px;
    transform: rotate(90deg);
    background-color: #848484;
    border-radius: 5px;
  }
  .location .map .street-1 {
    width: 280px;
    position: relative;
    top: 75px;
    left: 170px;
    height: 15px;
    transform: rotate(90deg);
    background-color: #848484;
    border-radius: 5px;
  }
  .grey {
    border-left: 50px solid #666;
  }
  .light-grey {
    border-right: 50px solid #848484;
  }
  .same {
    border-left: 50px solid #848484;
  }
  .lighter {
    border-right: 50px solid #a8a3a3;
  }
}

@media screen and (max-width: 1450px) {
  .contact button {
    bottom: 15px;
  }
  .links {
    left: 10px;
  }
}

@media screen and (max-width: 1400px) {
  .links {
    left: 40px;
  }
  .contact textarea {
    width: 90%;
    /*None of these work?
		margin-left: auto;
		margin-right: auto;
		align-self: center;*/
  }
}
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<footer>
  <div class="contact-section-background">
  </div>

  <div class="contact-section">
    <div class="contact-design-wrap-left">
      <div class="top">
        <div class="arrow-left lighter" id="align"></div>
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right grey"></div>
        <div class="arrow-top same"></div>
      </div>

      <div class="top-middle">
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right grey"></div>
      </div>

      <div class="bottom-middle">
        <div class="arrow-right grey"></div>
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right move grey"></div>
      </div>

      <div class="bottom">
        <div class="arrow-left light-grey"></div>
        <div class="arrow-top same"></div>
        <div class="arrow-left lighter" id="align2"></div>
      </div>
    </div>

    <div class="hex">
      <div class="back-to-top">Back to Top</div>
    </div>
    <div class="rhombus"></div>

    <div class="contact">
      <h1>Contact</h1>

      <p class="number">(480)456-7297</p>
      <p class="email">fakeEmail@fake.com</p>
      <div class="textarea">
        <textarea name="" id="" cols="30" rows="0" placeholder="Send us a message:)"></textarea>
        <button>Send</button>
        <div class="links">
          <p>Leave us a review!</p>

          <i class="fab fa-facebook-square" id="facebook"></i>
          <i class="fab fa-yelp" id="yelp"></i>
          <i class="fab fa-twitter-square" id="twitter"></i>
        </div>
      </div>
    </div>

    <div class="contact-line"></div>

    <div class="location">
      <h1>Location</h1>

      <div class="map">
        <i class="fas fa-map-marker-alt"></i>
        <a href="https://www.google.com/maps/place/6140+E+Main+St+%23100,+Mesa,+AZ+85205/@33.4161422,-111.7004473,17z/data=!3m1!4b1!4m5!3m4!1s0x872baf91c8d7aa5f:0x8bd5d9beacec1c1c!8m2!3d33.4161377!4d-111.6982586" class="address" target="_blank">6140 E Main St.</a>
        <div class="street-1">
          <p class="street-info">63rd St.</p>
        </div>
        <div class="street-2">
          <p class="street-info">N Recker Rd.</p>
        </div>
        <div class="street-3">
          <p class="street-info">US 60 E.</p>
        </div>
      </div>
    </div>

    <div class="contact-design-wrap-right">
      <div class="top">
        <div class="arrow-left lighter" id="align"></div>
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right grey"></div>
        <div class="arrow-top same"></div>
      </div>

      <div class="top-middle">
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right grey"></div>
      </div>

      <div class="bottom-middle">
        <div class="arrow-right grey"></div>
        <div class="arrow-left light-grey"></div>
        <div class="arrow-right move grey"></div>
      </div>

      <div class="bottom">
        <div class="arrow-left light-grey"></div>
        <div class="arrow-top same"></div>
        <div class="arrow-left lighter" id="align2"></div>
      </div>
    </div>

    <p class="copyright">&copy; 2019 El Metate | All Rights Reserved</p>
  </div>
</footer>

1 个答案:

答案 0 :(得分：0)

最简单的解决方案是给文本区域display: block，使其尊重左/右页边距。您可以像这样在最终的媒体查询中更新CSS：

.contact textarea {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

但是文本区域周围的div上的min-width: 500px也引起了一些对齐问题。您可能还想尝试在较小的屏幕尺寸上进行调整。

相关问题
最新问题