教我用 CSS 使图像居中答案

【问题标题】：Teach Me To Center an Image with CSS教我用 CSS 使图像居中
【发布时间】：2015-05-12 13:12:22
【问题描述】：

我已经搜索了这个问题，但没有发现任何有用的东西......在之前的帖子中，有人建议我没有使用中心。我查了一下，现在知道为什么使用它会处于不利地位......所以......我尝试了生活的整个 CSS 方面，但没有任何效果。我正在使用 HTML Kit-Tools，所以不确定这是否是程序问题，很可能是我无用的智力......

因此，我展示了我非常基本的页面代码，请教我如何使用 CSS 来执行此操作并向我解释原因。提前致谢，

皮特

<!DOCTYPE html>
<html>
<head>
<title>Access All Areas - Live</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div style="min-width: 960px; min-height: 390px; margin: 0 auto;">
<!-- AAA Logo -->
<div class="image">
    <center>
    <img src="a1.jpg" alt="Access All Areas Logo" width="750px" height="320px">
    </center>
</div>
<!--Navigation Bar-->
<div class="nav">
    <center>
    <ul>
    <li class="main"><a href="main.html">HOME</a></li>
    <strong><li class="live"><a href="live.html">LIVE</a></li></strong>
    <li class="studio"><a href="studio.html">STUDIO</a></li>
    <li class="fashion"><a href="fashion.html">FASHION</a></li>
    <li class="weddings"><a href="weddings.html">WEDDINGS</a></li>
    <li class="portraits"><a href="portraits.html">PORTRAITS</a></li>
    <li class="about"><a href="about.html">ABOUT</a>
    <a href="contact.html">CONTACT</a></li>
    </ul>
    </center>
</div><!--Nav-->
</div><!--Style-->
<!--COVER IMAGE-->
<center>
<div class="cover">
<img src="images/live.jpg" alt="Access All Areas Live Image" width="1140px" height="740px">
</center>   
</div><!--Cover-->
<!--Copyright-->
<p><strong>ALL RIGHTS RESERVED ACCESS ALL AREAS PHOTOGRAPHY</p></strong>
</body>
</html>

还有可怕的 CSS

li {
display:inline;
}

.nav a {
font-family:arial;
font-size:14px;
color: black;
padding:0px 70px 0px 20px;
}

a {
text-decoration:none;
}

.main {
text-weight:strong;
}

p {
font-family:arial;
font-size:10px;
font-weight:bold;
text-align:left;
padding-left:372px;
}

【问题讨论】：

Need to center image in web page via CSS的可能重复
它需要 /img 之后还是自动关闭？
w3schools.com/tags/tag_img.asp
快速修复：jsfiddle.net/coxfhfjs
这些都不起作用....第一个向右对齐，第二个向左发送，如果我单击另一个选项卡然后返回它，它也会向左对齐

标签： html css

【解决方案1】：

我总是margin:0 auto 并且它有效。给图像一些宽度。就这样。即#myimg {width:700px; margin:0 auto; position:relative;}

【讨论】：

【解决方案2】：

您可以为您的 css 文件中的图像创建一个简单的 css 类，例如 -

.centerit { display: block; margin-left: auto; margin-right:auto; }

在图片中包含班级名称，例如您的班级 -

<img class="centerit" src="a1.jpg" alt="Access All Areas Logo" width="750px" height="320px">

这会使图像变成一个显示块，并且左右边距自动将图像居中在您正在使用的<div class="image"> 内。图像将在您的 div 中居中，您的 div 是整个页面宽度。如果您的 DIV 较小，它将在 DIV 宽度内居中。这样您就可以删除旧的<center> 标签。对于 <DIV class="nav"> 中的文本，您可以使用 .nav { text-align: center; } ，这将使文本居中。

【讨论】：