中心比展示更好的方式：flex？

时间：2016-12-22 14:38:41

标签： html css css3 flexbox

我注意到，我在一个网站中居中的方式并不是最好的方式，因为它并没有真正集中。我玩了几个小时，并没有找到更好的方式。

我有我的codepen here并且想知道是否有人可以指出我正确的方向。

＆＃13;
＆＃13; 
section#projects > div.row > div.wrapper > img {
  height: 356px;
  width: 390px;
}
h1 {
  font-size: 70px;
  word-spacing: 1px;
  line-height: 90px;
  letter-spacing: -3px;
}
.social-links span {
  text-align: center;
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  margin-right: 4em;
  /*space between*/
  display: flex;
  align-items: flex-start;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  background-color: #c5c5c5;
}
.social-links span i {
  font-size: 50px;
  align-self: center;
  color: #fff;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  margin: 0 auto;
}
.social-links span i::before {
  display: inline-block;
  text-decoration: none;
}
.social-links span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.social-links span:hover i {
  color: #909090;
}
#contactMe {
  margin: 10vh auto;
  text-align: center;
}
.social-links {
  display: inline-block;
  margin-left: 7.9vw;
}
section#contact > div.row > div.col-md-12 > h2 {
  margin-top: 10vh;
}
section#contact > div.row > div.col-md-12 > h1 {
  margin-top: 11vh;
}
.social-links > div {
  text-align: center;
  margin: 0 auto;
  /*space between*/
  display: inline-block;
  float: left;
}
.social-links div h4 {
  color: coral;
  margin-left: -55px;
}
＆＃13; 
<section id="contact">
  <hr>
  <div class="row">
    <div class="col-md-12">

      <div id="contactMe">
        <div class="social-links text-center">
          <div class="mail">
            <a class="nostyle" href="mailto:email@mail.com">
              <span><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span>
              <h4>Email</h4>
            </a>
          </div>
          <div class="phone">
            <span><i class="fa fa-mobile fa-2x" aria-hidden="true"></i></span>
            <h4 class="text-center">phone</h4>
          </div>
          <div class="skype">
            <a class="nostyle" href="skype:kyle.c.r.fahey?call">
              <span><i class="fa fa-skype fa-2x" aria-hidden="true"></i></span>
              <h4>skype</h4>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

谢谢！

2 个答案:

答案 0 :(得分：2)

这完全取决于你制作的布局类型。在这种情况下，将元素放在中间非常简单。您可以使用：mcmc.sample(20000, 1000, 1) # Make the third argument a zero ：

＆＃13;
＆＃13; 
margin: 0 auto;
＆＃13; 
section#projects > div.row > div.wrapper > img {
  height: 356px;
  width: 390px;
}
h1 {
  font-size: 70px;
  word-spacing: 1px;
  line-height: 90px;
  letter-spacing: -3px;
}
.social-links span {
  text-align: center;
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  margin: 0 auto;
  /*space between*/
  display: inline-block;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  background-color: #c5c5c5;
}
.social-links span i {
  font-size: 50px;
  align-self: center;
  color: #fff;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  margin: 0 auto;
}
.social-links span i::before {
  display: inline-block;
  text-decoration: none;
}
.social-links span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.social-links span:hover i {
  color: #909090;
}
#contactMe {
  margin: 10vh auto;
  text-align: center;
}
.social-links {
  display: inline-block;
}
section#contact > div.row > div.col-md-12 > h2 {
  margin-top: 10vh;
}
section#contact > div.row > div.col-md-12 > h1 {
  margin-top: 11vh;
}
.social-links > div {
  text-align: center;
  margin: 0 auto;
  /*space between*/
  display: inline-block;
  float: left;
  width: 100px;
}
.social-links div h4 {
  color: coral;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

添加以下css。这些是css3 flexbox属性，用于使元素居中对齐。

.social-links {
  justify-content: center;
  display: flex;
}

注意 ：我已从您的样式中的某些元素中删除了margin。这个属性完全超出了那里。 

section#projects > div.row > div.wrapper > img {
  height: 356px;
  width: 390px;
}

h1 {
  font-size: 70px;
  word-spacing: 1px;
  line-height: 90px;
  letter-spacing: -3px;
}

.social-links span{
  text-align:center;
  width: 10vw;
  height: 10vw;
  border-radius: 100%;
  display: flex;
  align-items: flex-start;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  background-color: #c5c5c5;
}
.social-links span i{
  font-size: 50px;
  align-self:center;
  color: #fff;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  margin: 0 auto;
}
.social-links span i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links span:hover{
  background: rgba(0,0,0,0.1);
}
.social-links span:hover i{
  color:#909090;
}

#contactMe {
  margin: 10vh auto;
  text-align: center;
}

.social-links {
  justify-content: center;
  display: flex;
}

section#contact > div.row > div.col-md-12 > h2 {
  margin-top: 10vh;
}

section#contact > div.row > div.col-md-12 > h1 {
  margin-top: 11vh;
}

.social-links > div {
  text-align: center;
  margin: 0 4em; /*space between*/
}

.social-links div h4 {
  color: coral;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact" class="container">
  <hr>
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Contact Me</h1>
      <h2 class="text-center">Let's get the ball rolling.</h2>
      <div id="contactMe">
        <div class="social-links text-center">
          <div class="mail">
            <a class="nostyle" href="mailto:email@mail.com">
              <span><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span>
              <h4>Email</h4>
            </a>
          </div>
          <div class="phone">
            <span><i class="fa fa-mobile fa-2x" aria-hidden="true"></i></span>
            <h4 class="text-center">phone</h4>
          </div>
          <div class="skype">
            <a class="nostyle" href="skype:kyle.c.r.fahey?call">
              <span><i class="fa fa-skype fa-2x" aria-hidden="true"></i></span>
              <h4>skype</h4>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

相关问题
最新问题