我想做的是有一个图像居中,然后另一个图像与它对齐到左边。我试着搜索,没有发现任何正确的工作。如有任何建议,我将不胜感激。
HTML<div class="container">
<header>
<div>
<a href="index.html">
<img src="left.png" border="0" width="174" height="350" />
<img class="center" src="center.png" border="0" width="700" height="350" />
</a>
</div>
CSS html
{
min-height:100%;
}
body
{
background-color: #9CF;
background-repeat: no-repeat;
}
body,td,th
{
font-size: large;
margin: 3% 5% 3% 5%;
}
.container
{
background-color: rgba(0,0,0,0.4);
padding: 6px;
}
.linkbg
{
background-color: #000000;
color: #FFF;
text-align:center;
}
.dashboard
{
text-align:right;
}
ul
{
background-color: #0099CC;
width:100%;
text-align:center;
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
opacity:0.7;
}
li
{
display:inline;
}
.nava:link,.nava:visited
{
font-weight:bold;
color:black;
background-color:##0099CC;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
.nava:hover,.nava:active
{
background-color: #00FFFF;
}
img
{
max-width: 100%;
height: auto;
width: auto9;
}
.center
{
display:inline-block;
margin-left:auto;
margin-right:auto;
}
你可以尝试使用下面给出的技巧
<img style="margin:0px auto;display:block" src="Image URL Here"/>
完整的评论,你可以点击下面的链接http://bloggingfear.blogspot.in/2012/11/how-to-center-image-using-html-5-code.html
还有另一种方法:
- 添加
text-align: center;
到容器 - 将
position: absolute; left: 0;
应用于"左"图像(您应该 - 可以删除
.container img
的所有CSS。
左边的图像不会影响其他图像的位置,因为它是绝对定位的。另一个图像将恰好位于容器的中央。
这段代码有问题
img
{
max-width: 100%;
height: auto;
width: auto9;
}
改成
img
{
max-width: 100%;
height: auto;
width: auto;
}
此外,你想要应用的样式可以简单地添加,而不需要添加复杂的内容。
下面是演示:http://jsfiddle.net/mastermindw/9qAL6/7/
这是我让图片在页面中间加载的方法
<img src="..." alt=".." style="margin:0px auto;display:block" />