Question

我正在制作一些社交按钮来显示移动中水平对齐的中心。现在有4个按钮，每个按钮都是使用图像制作的，因此很难正确对齐这些按钮。

这是我的代码：

＆＃13;

.sc1 {
  width: 100%;
  margin: 5px 0px;
  background-color: #3498DB;
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid black;
}
.sc2 {
  float: right;
  border: 2px solid green;
}
.sc3 {
  color: white;
  float: left;
  border: 2px solid red;
  padding: 5px 0px;
}
.sc4 {
  display: flex;
  flex-direction: row;
  /*width: 168px;*/
  border: 2px solid yellow;
}
.sc4 .facebook-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: 0 0;
  margin: 0px 5px;
}
.sc4 .twitter-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -32px 0px;
  margin: 0px 5px;
}
.sc4 .google-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -125px 0px;
  margin: 0px 5px;
}
.sc4 .instagram-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -63px 0px;
  margin: 0px 5px;
}
@media only screen and (max-width: 400px) {
  .sc2 {
    width: 100%;
  }
  .sc3 {
    width: 100%;
    text-align: center;
  }
}

＆＃13;

<div class="sc1">
  <div class="sc2">
    <div class="sc3">
      <span>Connect with us:</span>
    </div>
    <div class="sc4">
      <a href="http://www.facebook.com" title="Like us on Facebook">
        <div class="facebook-icon"></div>
      </a>
      <a href="http://www.twitter.com" title="Follow us on Twitter">
        <div class="twitter-icon"></div>
      </a>
      <a href="http://www.google.com" title="Like us on Google+">
        <div class="google-icon"></div>
      </a>
      <a href="http://www.instagram.com" title="Follow us on Instagram">
        <div class="instagram-icon"></div>
      </a>
    </div>
  </div>
</div>

＆＃13;

如何对齐中间的按钮并使用相等的间距？这是我现在能够显示这些按钮的当前状态。

如果有人想要查看完整代码，那么您可以查看it here。

Answer 1

<强>浮筒

保持事物的中心并且均匀'w''

container {
  display: block;
  width: 100%;
  background-color: hsla(214, 72%, 62%, 0.2);
  overflow-y: auto; /* normalizes div height of float parent */
}
imgblock {
  float: left;
  width: 25%;
  text-align: center; /* center images */
  padding: 10px; /* if you want to add padding.. */
  border: 1px solid hsla(0, 0%, 0%, 0.1); /* .. or borders .. */
  box-sizing: border-box; /* use this to properly calculate width % */
  vertical-align: middle;
}
imgblock img {
  width: 50px; height: 50px;
  vertical-align: middle; /* makes img true to center, vertically speaking */
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}

<container>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>

<强>拨弄

https://jsfiddle.net/Hastig/d49a4bnh/2/

<强> Flexbox的

如果你的意思是图标容器的宽度是一个flexbox解决方案

container {
  display: flex;
  width: 100%;
  background-color: hsla(214, 72%, 62%, 0.2);
}
imgblock {
  display: flex;
  justify-content: center; /* centers images */
  flex: 1; /* enlarge each element equally to its maximum */
  padding: 10px;
}
imgblock img {
  width: 50px; height: 50px;
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}

<container>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>

<强>拨弄

https://jsfiddle.net/Hastig/d49a4bnh/

内嵌块

这是使用内联块和百分比宽度的可能解决方案

container {
  display: block;
  width: 100%; /* set a width so the children can calculate their widths */
  background-color: hsla(214, 72%, 62%, 0.2);
  font-size: 0; /* negates the space inline-blocks add after each element, font bug/flaw */
}
imgblock {
  display: inline-block;
  width: 25%; /* keeps each img container even */
  text-align: center; /* centers the images */
  padding: 10px; /* if you want to add padding.. */
  box-sizing: border-box; /* use this to properly calculate width % */
}
imgblock img {
  width: 50px; height: 50px;
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}

<container>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
  <imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>

<强>拨弄

https://jsfiddle.net/Hastig/d49a4bnh/1/

Answer 2

好的，为了使它能够工作，我必须在你的代码中加入一些东西（我也改了一点，使它的尺寸都合适）。

我将width: calc(100% - 20px);添加到.sc1，因此它不是100％的页面+ 10px。

我在媒体查询中对.sd2做了同样的事情。

我向媒体查询添加了.sc4 {width: 100%;}，因此它占用了所有空间。

我将.sc4 a {flex: 1;}添加到主css中，这意味着a中的每个.sc4都会占用所有空间。

最后，我将每个div的保证金更改为margin: 0px auto;，以便它们显示在a标记的中心。

这是最终结果。

＆＃13;

.sc1 {
  width: calc(100% - 20px);
  margin: 5px 0px;
  background-color: #3498DB;
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid black;
}
.sc2 {
  float: right;
  border: 2px solid green;
}
.sc3 {
  color: white;
  float: left;
  border: 2px solid red;
  padding: 5px 0px;
}
.sc4 {
  display: flex;
  flex-direction: row;
  /*width: 168px;*/
  border: 2px solid yellow;
}
.sc4 a {
  flex: 1;
  align-items: center;
  text-align: center;
}
.sc4 .facebook-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: 0 0;
  margin: 0px auto;
}
.sc4 .twitter-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -32px 0px;
  margin: 0px auto;
}
.sc4 .google-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -125px 0px;
  margin: 0px auto;
}
.sc4 .instagram-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  height: 32px !important;
  width: 32px;
  background-position: -63px 0px;
  margin: 0px auto;
}
@media only screen and (max-width: 400px) {
  .sc2 {
    width: calc(100% - 20px);
    float: none;
  }
  .sc3 {
    width: 100%;
    text-align: center;
  }
  .sc4 {
    width: 100%;
  }
}

＆＃13;

<div class="sc1">
  <div class="sc2">
    <div class="sc3">
      <span>Connect with us:</span>
    </div>
    <div class="sc4">
      <a href="http://www.facebook.com" title="Like us on Facebook">
        <div class="facebook-icon"></div>
      </a>
      <a href="http://www.twitter.com" title="Follow us on Twitter">
        <div class="twitter-icon"></div>
      </a>
      <a href="http://www.google.com" title="Like us on Google+">
        <div class="google-icon"></div>
      </a>
      <a href="http://www.instagram.com" title="Follow us on Instagram">
        <div class="instagram-icon"></div>
      </a>
    </div>
  </div>
</div>

＆＃13;

希望这有帮助。

Answer 3

在父div上使用function deleteFutureAppointments() { Appointment.findAll({ where: { pro_id, client_id, from_datetime_utc: { $gt: new Date() } } }).then(appointments => { return Promise.all(appointments.map(appointment => { var id = appointment.get("appointment_id"); const appointmentSMIQuery = { where: { appointment_id: id } }; return AppointmentMedia.destroy(appointmentSMIQuery).then(result => { if (result) removeAppointmentMedia.push(id); return AppointmentService.destroy(appointmentSMIQuery); }) .then(() => IndexAppointmentCalendar.destroy(appointmentSMIQuery)) .then(() => Appointment.destroy({ where: { client_id } })); })); }) .catch((err) => { next(err); }); }水平居中。

Answer 4

在所有社交图标周围添加<center>标记。它应该是这样的：

<div class= "sc1">
                <div class= "sc2">
                    <div class= "sc3">
                        <span>Connect with us:</span>
                    </div>
                        <div class= "sc4"><center>
                             <a href="http://www.facebook.com" title="Like us on Facebook"><div class="facebook-icon"></div></a>
                             <a href="http://www.twitter.com" title="Follow us on Twitter"><div class="twitter-icon"></div></a>
                             <a href="http://www.google.com" title="Like us on Google+"><div class="google-icon"></div></a>
                             <a href="http://www.instagram.com" title="Follow us on Instagram"><div class="instagram-icon"></div></a>
                       </center> </div>
                </div>
            </div>

Answer 5

简化了一下......

....移除浮动，将内容更改为display属性，在父级上添加文本对齐，调整边距，摆脱锚标记中多余的div ........

＆＃13;

.sc1 {
  width: 100%;
  margin: 5px 0px;
  background-color: #3498DB;
  padding: 5px 10px;
  border: 2px solid black;
  text-align: center;
}
.sc2 { 
  width: calc((42px * 4) + 16px); 
 /* ^^^^
    icon + it's margin/padding * number of icons -- 
    You can remove the +16px.. 
    that is to compensate for the borders on the 
    elements in this snippet.  
    Ideally it'll be simply ---  
    calc(42px * 4); 
    --- */ 


  margin: 0 auto;
  border: 2px solid green; }
.sc3 {
  color: white;
  border: 2px solid red;
  display: block;
  vertical-align: top;
  width: 100%; 
  line-height: 32px; /* height of icons */
}
.sc4 {
  border: 2px solid yellow;
  display: block;
  margin: 0 auto; 
  width: 100%; 
}

.sc4 a {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 5px; }

.facebook-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  background-position: 0 0;
}
.twitter-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  background-position: -32px 0px;
}
.google-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  background-position: -125px 0px;
}
.instagram-icon {
  background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
  background-position: -63px 0px;
}
@media only screen and (max-width: 400px) {
  .sc2 {
    width: 100%;
  }
  .sc3 {
    width: 100%;
    text-align: center;
  }
}

＆＃13;

<div class="sc1">
  <div class="sc2">
    <div class="sc3">
      <span>Connect with us:</span>
    </div>
    <div class="sc4">
      <a href="http://www.facebook.com" title="Like us on Facebook" class="facebook-icon"></a>
      <a href="http://www.twitter.com" title="Follow us on Twitter"  class="twitter-icon"></a>
      <a href="http://www.google.com" title="Like us on Google+" class="google-icon"></a>
      <a href="http://www.instagram.com" title="Follow us on Instagram" class="instagram-icon"></a>
    </div>
    </div>
</div>

＆＃13;

Answer 6

我终于得到了我这个问题的完美答案。如果我只是添加

.sc4 .facebook-icon, .sc4 .twitter-icon, .sc4 .google-icon, .sc4 .instagram-icon{
    margin: 0px auto;

到媒体查询和转移图标类，然后它应该正常工作。

现在是完整的代码。

.sc1 {
    width: 100%;
    margin: 5px 0px;
    background-color: #3498DB;
    display: inline-block;
    padding: 5px 10px;
}
.sc2 {
    float: right;
}
.sc3 {
    color: white;
    float: left;
    padding: 5px  0px;
}
.sc4 {
    display: flex;
    flex-direction: row;
}
.sc4 .facebook-icon {
    background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: 0 0;
    margin: 0px 5px;
}
.sc4 .twitter-icon {
    background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -32px 0px;
    margin: 0px 5px;
}
.sc4 .google-icon {
    background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -125px 0px;
    margin: 0px 5px;
}
.sc4 .instagram-icon {
    background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
    height: 32px !important;
    width: 32px;
    background-position: -63px 0px;
    margin: 0px 5px;
}
@media only screen and (max-width: 400px){
    .sc2 {
        width: 100%;
        float: none;
    }
    .sc3{
        width: 100%;
        text-align: center;
    }
    .sc4 {
        width: 100%;
    }
    .facebook-icon, .twitter-icon, .google-icon, .instagram-icon{
        width: 25%;
    }
    .sc4 .facebook-icon, .sc4 .twitter-icon, .sc4 .google-icon, .sc4 .instagram-icon{
        margin: 0px auto;
    }
}

HTLM代码

<div class= "sc1">
                <div class= "sc2">
                    <div class= "sc3">
                        <span>Connect with us:</span>
                    </div>
                        <div class= "sc4">
                            <div class="facebook-icon"><a href="http://www.facebook.com" title="Like us on Facebook"></a></div>
                            <div class="twitter-icon"><a href="http://www.twitter.com" title="Follow us on Twitter"></a></div>
                            <div class="google-icon"><a href="http://www.google.com" title="Like us on Google+"></a></div>
                            <div class="instagram-icon"><a href="http://www.instagram.com" title="Follow us on Instagram"></a></div>
                        </div>
                </div>
            </div>

如何使用CSS水平对齐图像和自动宽度？

6 个答案: