使用div来居中内联元素

时间：2018-01-22 11:25:09

标签： html css

我试图将h3元素置于我主页的页脚中心，同时将div sms-links放在此左侧。然而，div在加入时将h3从中心击倒。我很感激任何提示。

＆＃13;
＆＃13; 
footer {
  height: auto;
  width: 100%;
  background-color: #1c1c1c;
  margin-top: 1.2em;
  box-shadow: 10px 10px 10px 10px #fffff;
  display: inline-table;
}

.sms-links {
  float: left;
  position: relative;
  left: 12em;
  margin: 0.8em;
}

footer h3 {
  font-size: 17px;
  font-weight: 200;
  color: white;
  width: 100%;
  text-align: center;
  margin: 0.8em;
}
＆＃13; 
<footer>
  <div class="sms-links">
    <a href="https://www.instagram.com/" target="_blank">
      <picture>
        <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
        <source srcset="http://tokyoneighbourhoods.com/">
        <img src="http://tokyoneighbourhoods.com/">
      </picture>
    </a>

    <picture>
      <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png" media="(max-width: 900px)">
      <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png">
      <img src="http://tokyoneighbourhoods.com/pics/facebook_med.png">
    </picture>

    <picture>
      <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
      <source srcset="http://tokyoneighbourhoods.com/">
      <img src="http://tokyoneighbourhoods.com/">
    </picture>
  </div>
  <h3>Copyright: Tokyo Neighbourhoods 2017</h3>
</footer>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

希望这会有所帮助，只需将.sms-links：的位置更改为absolute

即可

这有帮助，但你必须做一些移动的@media查询...以便做出响应。

footer {
    height: auto;
    width: 100%;
    background-color: #1c1c1c;
    margin-top: 1.2em;
    box-shadow: 10px 10px 10px 10px #fffff;
    display: inline-table;
}

.sms-links {
    float: left;
    position: absolute;
    left: 12em;
    margin: 0.8em;
}

footer h3 {
    font-size: 17px;
    font-weight: 200;
    color: white;
    width: 100%;
    text-align: center;
    margin: 0.8em;
}
<footer>
<div class="sms-links">
                <a href="https://www.instagram.com/" target=_blank">
                <picture>
                    <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
                    <source srcset="http://tokyoneighbourhoods.com/">
                    <img src="http://tokyoneighbourhoods.com/">
                </picture> 
                </a>

                <picture>
                    <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png" media="(max-width: 900px)">
                    <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png">
                    <img src="http://tokyoneighbourhoods.com/pics/facebook_med.png">
                </picture>

                <picture>
                    <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
                    <source srcset="http://tokyoneighbourhoods.com/">
                    <img src="http://tokyoneighbourhoods.com/">
                </picture> 
             </div>
          <h3>Copyright: Tokyo Neighbourhoods 2017</h3>
      </footer>

答案 1 :(得分：0)

我已将.sms-links更改为position: absolute;和left: 1em;

从width:100%

中删除了h3

您的颜色代码box-shadow不合适。它应该是box-shadow: 10px 10px 10px 10px #fff;

希望这会有所帮助：）

footer {
  height: auto;
  width: 100%;
  background-color: #1c1c1c;
  margin-top: 1.2em;
  box-shadow: 10px 10px 10px 10px #fff;
  display: inline-table;
}

.sms-links {
  float: left;
  position: absolute; /*Change this to absolute*/
  left: 1em;/*set left as per requirement*/
  margin: 0.8em;
}

footer h3 {
  font-size: 17px;
  font-weight: 200;
  color: white;
  /*width: 100%;*//*Remove this*/
  text-align: center;
  margin: 0.8em;
}
<footer>
  <div class="sms-links">
    <a href="https://www.instagram.com/" target="_blank">
      <picture>
        <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
        <source srcset="http://tokyoneighbourhoods.com/">
        <img src="http://tokyoneighbourhoods.com/">
      </picture>
    </a>

    <picture>
      <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png" media="(max-width: 900px)">
      <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png">
      <img src="http://tokyoneighbourhoods.com/pics/facebook_med.png">
    </picture>

    <picture>
      <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
      <source srcset="http://tokyoneighbourhoods.com/">
      <img src="http://tokyoneighbourhoods.com/">
    </picture>
  </div>
  <h3>Copyright: Tokyo Neighbourhoods 2017</h3>
</footer>

答案 2 :(得分：-1)

试试希望这会有效

            <style>
                  footer {
                     height: auto;
                     width: 100%;
                     background-color: #1c1c1c;
                     margin-top: 1.2em;
                     box-shadow: 10px 10px 10px 10px #fffff;
                     display: inline-table;
                  }

             .sms-links {
                 float: left;
                 position: inherit;
                  left: 12em;
                 margin: 0.8em;
             }

             footer h3 {
                 font-size: 17px;
                 font-weight: 200;
                 color: white;
                  width: 100%;
                 text-align: center;
                  margin: 0.8em;
               }
        </style>
       <footer>
            <p class="sms-links"
              <a href="https://www.instagram.com/" target=_blank">
                 <picture>
                <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
                <source srcset="http://tokyoneighbourhoods.com/">
                <img src="http://tokyoneighbourhoods.com/">
            </picture> 
            </a>

            <picture>
                <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png" media="(max-width: 900px)">
                <source srcset="http://tokyoneighbourhoods.com/pics/facebook_med.png">
                <img src="http://tokyoneighbourhoods.com/pics/facebook_med.png">
            </picture>

            <picture>
                <source srcset="http://tokyoneighbourhoods.com/" media="(max-width: 900px)">
                <source srcset="http://tokyoneighbourhoods.com/">
                <img src="http://tokyoneighbourhoods.com/">
            </picture> 
         </p>
         <h3>Copyright: Tokyo Neighbourhoods 2017</h3>
       </footer>

答案 3 :(得分：-2)

默认情况下，div是一个块元素。因此，使用display属性使其成为内联元素。其次，由于H3是文本元素，因此使用CSS将其居中。如果要将文本与徽标内联居中，请向H3添加行高属性并进行调整。 

.sms-links {display:inline;}
footer h3 {text-align:center;}
相关问题
最新问题