主图像出现在中心

时间:2014-11-14 06:29:58

标签: html css html5 css3

我正在这个页面上工作: http://tinyurl.com/ok9wzro

主图像(建筑物)在左侧移动。我希望它与下面的内容完全一致(在中心)。 我希望它在所有屏幕尺寸上看起来都相似。

任何帮助都将受到高度赞赏。

谢谢..

对不起该链接,它仅在我们的Intranet上运行。这是我的代码:

 <header style="background-image:none; background-size: none;background-color:#fff; height:410px;border-bottom:none" >
    <div style="width: 76%; margin: auto;">
        <div style="float: left; width: 8.5%;"></div>
        <div style="float: left; width: 83%; display: table;margin: 0 auto;">
            <img src="http://abcde.com/images/image.jpg" style="display: block; margin-left: auto;margin-right: auto" width="" />   
            <div class="outer-wrapper" style="padding:6% 1% 1% 18%; position:absolute">
                     <div class="title" style="min-height: 0px; width: 66.15254%; position:absolute;margin-left:0px">
                        <hgroup>
                          % if homepage_overlay_html:
                            ${homepage_overlay_html}
                          % else:
                            % if self.stanford_theme_enabled():
                              <h1>${_("Free courses from <strong>{university_name}</strong>").format(university_name="VU")}</h1>
                            % else:
                              <h2>${_("Some text here")}</h2>
                            % endif
                              <h2>${_("For anyone, anywhere, anytime")}</h2>
                          % endif
                        </hgroup>
                  </div>
                </div>
        </div>
        <div style="float: left; width: 8.5%;"></div>
        <br style="clear: left;" />
    </div>
  </header>

2 个答案:

答案 0 :(得分:2)

不知道你的剧本是什么.. 我假设和解决方案如下。希望它对你有帮助......

#imgeId
{
background:url(imagePath) no-repeat center center;
height:200px;
width:200px;
}

img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

答案 1 :(得分:0)

try this its useful to you your
<p align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></p>