Question

我已经搜索过这个问题并发现没有任何效果......在之前的帖子中，有人建议我没有使用中心。我查了一下，现在看看为什么它使用它是不利的...所以......我尝试了整个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;
}

Answer 1

您可以在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; }，这会使文字居中。

Answer 2

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

教我用CSS中心图像

2 个答案: