2

我想要做的是让一个图像居中，然后另一个与它对齐的图像与它对齐。我尝试过搜索，但没有发现任何正确的方法。任何建议将不胜感激。

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: auto\9;
}

.center
{
    display:inline-block;
    margin-left:auto; 
    margin-right:auto;
}
4

4 回答 4

12

您可以尝试使用以下给定的技术

<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

于 2013-12-31T15:30:18.017 回答
3

这是另一种方法：

  • 添加text-align: center;到容器中。
  • 应用于position: absolute; left: 0;“左”图像（您应该为它添加一个类）。
  • 您可以删除.container img.

左图不会影响另一张图的位置，因为它是绝对定位的。另一个图像将在容器中精确居中。

于 2013-06-13T20:05:50.277 回答
1

您在此代码中有问题

img 
{
    max-width: 100%;
    height: auto;
    width: auto\9;
}

只需将其更改为

img 
{
    max-width: 100%;
    height: auto;
    width: auto;
}

此外，您可以简单地添加您想要应用的样式，而不会添加您添加的复杂性。

这是演示：http: //jsfiddle.net/mastermindw/9qAL6/7/

于 2013-06-13T18:28:52.830 回答
0

这是我在页面中间加载图片的方式

<img src="..." alt=".." style="margin:0px auto;display:block" />
于 2017-11-28T21:18:20.247 回答