Html 左对齐，并居中容器内的内嵌图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17094283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left align, and center an inline image inside a container
提问by kleeman7
What I am trying to do is have an image centered, and then another image inline with it that is aligned to the left. I have tried searching and have found nothing thats works right. Any suggestions will be greatly appreciated.
我想要做的是让一个图像居中，然后另一个与它对齐的图像与左侧对齐。我试过搜索，但没有发现任何正确的方法。任何建议将不胜感激。
HTML
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
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;
}
.center
{
display:inline-block;
margin-left:auto;
margin-right:auto;
}
回答by Mohammed Raqeeb
you can try using the below given technique
您可以尝试使用以下给定的技术
<img style="margin:0px auto;display:block" src="Image URL Here"/>
for a full review you can check the below link http://bloggingfear.blogspot.in/2012/11/how-to-center-image-using-html-5-code.html
如需完整评论，您可以查看以下链接 http://bloggingfear.blogspot.in/2012/11/how-to-center-image-using-html-5-code.html
回答by Brian Stephens
Here's another way to do this:
这是执行此操作的另一种方法：
- Add
text-align: center;to the container. - Apply
position: absolute; left: 0;to the "left" image (you should add a class for it). - You can remove all the CSS for
.container img.
- 添加
text-align: center;到容器中。 - 应用于
position: absolute; left: 0;“左”图像（您应该为它添加一个类）。 - 您可以删除
.container img.
The left image will not affect the position of the other image because it's absolutely positioned. The other image will be centered exactly in the container.
左图不会影响其他图的位置，因为它是绝对定位的。另一个图像将在容器中精确居中。
回答by wakqasahmed
You have problem in this code
您在此代码中遇到问题
img
{
max-width: 100%;
height: auto;
width: auto;
}
just change this with
只需将其更改为
img
{
max-width: 100%;
height: auto;
width: auto;
}
moreover the style you want to apply on it can simply be added without complications that you added.
此外，您可以简单地添加您想要应用的样式，而无需添加复杂的内容。
Here is the demo: http://jsfiddle.net/mastermindw/9qAL6/7/
回答by dcarolinac
this is the way I makes a picture load in the middle of a page
这是我在页面中间加载图片的方式
<img src="..." alt=".." style="margin:0px auto;display:block" />
