将图像置于锚点内

时间:2013-02-07 04:57:33

标签: html css tags anchor centering

我试图水平居中一个锚标签中包含的图像。我尝试将其设置为块并将边距设置为auto而没有运气。我已经尝试将它包装在div标签中并做同样的事情,但仍然没有运气。甚至尝试将div内置于div内的div中。我查看了其他帖子,似乎没有任何帮助。无论我做什么,图像仍然左对齐。

HTML

<div id="slideWrapper">
    <h1 id="slideHeading">This is a Header</h1> 
    <hr/>       
    <div class="centerMe"><a href="javascript:slidelink()" class="slideA">
        <img src="./images/Slides/cheeseBoards.jpg" name="slide" id="slideImg"/></a></div>
    <hr/>
    <div class="centerMe">
        <a href="javascript:slidelink()"class="slideA" id="slideText">Check out our services and other great stuff.</a>
    </div>
</div>

CSS

.centerMe {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid green;
    text-align: center;
}
#slideWrapper {
    border: 1px solid blue; 
}
#slideImg {
    display: block;
    height:500px;
    width:900px;
    border:1px solid red;
    margin-left: auto;
    margin-right: auto;
}

我在所有东西周围放置了边框,以便我可以看到放置的东西。由于某种原因,似乎图像不包含在div中。这似乎应该是这么简单。任何帮助将不胜感激。感谢。

1 个答案:

答案 0 :(得分:3)

确保没有浮动:从父母那里继承。保证金:0自动;当你有浮动时不起作用:left;或位置:绝对;