如何水平居中拆封DIV

我有一个布局是这样的：如何水平居中拆封DIV

<container div> 
    <header></header> 
    <footer> 
     <div> 
      <nav> 
       <ul> 
        <li></li> 
       </ul> 
      </nav> 
     <div> 
    </footer> 
</container div>

页脚是一个居中的粘页脚。我想添加社交媒体图标，但我不想指定特定的宽度。

如何在不丢失中心位置的情况下对页脚div进行热缩包装？如果我将inline:block添加到div css，则居中会丢失并且它与浏览器窗口的左侧对齐。

来源

2017-07-15 Lisa

不知道你的 “拆封” 的意思 - 这就是你'要去？ https://jsfiddle.net/c0odznc8/3/ –

如果您将inline-block添加到内部div中，您将失去居中，但如果您向页脚添加text-align: center，则可以解决此问题。

另一种解决方案是使用CSS3 transform。（您在标题中使用了一个）。当您在CSS transform中使用百分比时，百分比与元素本身而不是元素的容器相关。看下面的代码片段：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
footer#social { 
 
    background: #F00; 
 
    bottom: 0; 
 
    left: 50%; 
 
    padding: 0 10px; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
    width: auto; 
 
}

<footer id="social"> 
 
    <div id="socmed"> 
 
    <nav id="social" class="socialIndex"> 
 
     <ul> 
 
     <li><a href="mailto:[email protected]">mail </a></li> 
 
     <li><a href="https://www.linkedin.com/in/anonymous/">linkedin</a></li> 
 
     <li><a href="tel:xx-xxx-xxx-xxx">telephone</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</footer>

来源

2017-07-15 16:28:28 ElChiniNet

我已经使用了转换部分，并且工作！谢谢！ – Lisa

完美。我很高兴听到这个消息;） – ElChiniNet

只需使用 'inline-block的'，像这样：

footer > div {display: inline-block;}

来源

2017-07-15 16:35:15 JoostS

如何水平居中拆封DIV

回答

相关问题