gpt4 book ai didi

html - 教我用 CSS 居中图像

转载 作者:行者123 更新时间:2023-11-28 08:16:16 25 4
gpt4 key购买 nike

我已经搜索过这个问题,但没有发现任何有用的东西......在之前的帖子中,有人建议我不要使用中心。我查了一下,现在明白为什么使用它会处于劣势……所以……我尝试了整个 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;
}

最佳答案

您可以在您的 css 文件中为您的图像制作一个简单的 css 类,例如 -

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

在图像中包含类(class)名称,例如您的 -

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

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

关于html - 教我用 CSS 居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28974889/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com