文章/答案/技术大牛

发布

社区首页 >问答首页 >教我如何使用CSS居中显示图像

问教我如何使用CSS居中显示图像
EN

Stack Overflow用户

提问于 2015-03-11 05:59:33

回答 2查看 76关注 0票数 0

我已经搜索了这个问题，但没有找到任何有用的东西...在之前的一篇文章中，有人建议我不要使用center。我查了一下，现在明白为什么使用它是不利的……所以..。我尝试了整个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;
}

html

css

回答 2

Stack Overflow用户

发布于 2015-03-11 15:40:45

您可以为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; }，这将使文本居中。

票数 0

Stack Overflow用户

发布于 2015-03-11 16:19:40

我总是margin:0 auto，它工作。使图像具有一定的宽度。就这样。ie #myimg {width:700px; margin:0 auto; position:relative;}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28974889

复制

相似问题

问教我如何使用CSS居中显示图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问教我如何使用CSS居中显示图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问教我如何使用CSS居中显示图像
EN