【问题标题】:CSS centering of an image not working图像的CSS居中不起作用
【发布时间】:2012-07-26 20:13:48
【问题描述】:

我正在尝试使用 margin-left 和 margin-right auto 将图像 (forces.png) 水平居中,但图像保持左对齐。我的网站是http://goo.gl/cHO1u 我使用的代码有什么问题?谢谢

HTML:

<div class="section" id="presentation">
<div id="presentation-highlevel">
<p>NOTRE ENTREPRISE</p>
<p>ddfdsfdsfdsfdsjfl dfljdsfdsfjdsjfdlksj dfljdslfjldsjflkdsjflsjfdls ldf,dlsmjfdsjfsdmfjdmsjfms dfmdsfjmdsjfmdsjfmdsjfdlms mkdfmksdmfkdmsfkdsfdsmfkmldskf dfmdmkfmdkfmdlskf dfkdmfkdmkfmdskf dfmkdsmfkdsmkfmdskfdms dskfdsmkfdsmkfmdsfkd </p>
</div>
<div id="presentation-highlights"><img src="images/forces.png" alt="Picture" /></div>
</div><!--END page1-->

CSS:

#presentation
{
    height:1300px;
    background:#afc9ff; 
  background: url(../images/norway-landscape60.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

#presentation-highlights

{
width: 100%;
display: block;
margin-left:auto;
margin-right:auto;
}

【问题讨论】:

    标签: css alignment centering


    【解决方案1】:
    #presentation-highlights {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    }
    

    【讨论】:

    • 谢谢 - 工作就像一个魅力!为什么我需要使用“text-align”来对齐图像?
    • @Greg 因为图像不是块元素。并请投票并接受对您有帮助的答案。
    【解决方案2】:
    #presentation {
        height:100%;
        background:#afc9ff; 
        background: url(../images/norway-landscape60.jpg) no-repeat center fixed; 
        text-align: center;
    }
    body {
        text-align: center;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-11-28
      • 2017-07-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-04-30
      • 1970-01-01
      • 2018-01-09
      相关资源
      最近更新 更多