个人中心
gpt4 book ai didi

html - 图像不在大屏幕上居中

转载 作者：太空宇宙 更新时间：2023-11-03 20:32:58 25 4
gpt4 key购买 nike

我正试图将我网站中的图像置于导航下方。它在所有浏览器的小屏幕上正确居中，但是在大屏幕上它不在任何浏览器中居中。我试过用“p”标签包裹图像并使用文本对齐将其居中，但它没有用。我咨询了其他对html和css比较了解的人，他们一无所获。我在互联网上搜索了一个与我自己类似的问题，但一无所获。对此问题的任何见解都将不胜感激。

更新:感谢这里的人，问题已经解决。我没想到会有这么多快速而有用的回复。谢谢。

这是我的 HTML 和 CSS。

html{
  font-family: 'Ubuntu', sans-serif;
  overflow: hidden;
}
html>a{
  text-decoration:none;
  list-style-type: none;
}
body{
  overflow:hidden;
  margin:0;
  padding:0;
}
.header{
  position:relative;
  width:100%;
  background-color:black;/*#00FF00*/
  margin:0px;
  padding:0px;
  z-index: -100;
  font-size:2em;
}
.header>h1{
  position:relative;
  float:right;
}
.titlehead{
  color: white;
}
.logo{
  z-index: 1;
  float:left;
}
.navBar{
  position:relative;
  top:15%;
  float:left;
  width:50%;
  overflow:hidden;
}
.nav{
	color:black;
}
.nav>ul{
  list-style-type:none;
  height:100%;
}
.nav>ul>li{
  text-decoration:none;
  float:left;
}
.nav>ul>li:hover{
	-webkit-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
   -moz-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
     -o-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
        transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625); /* custom */
    border-bottom-style:solid;
    border-bottom-width:4px;
    border-bottom-color:black;;
}
.nav>ul>li>a{
  list-style-type:none;
  text-decoration:none;
  padding:15px;
  font-size:1.7em;
  color: black;
}
.images{
	width:100%;
	position:relative;
	top:100px;
	text-align:center;
}
.images>img{
	display:block;
	width:500px;
	margin-left:auto;
	margin-right:auto;
}
.images>p{
	display:block;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
#melita{
	position: relative;
	top: -15%;
	transform: translateY(15%);
	width:100%;
}
.wrapper{
	/*-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;*/
}
.content{
	/*position:relative;
	top:50%;*/
}
<!DOCTYPE HTML>
<html>
 <head>
      <title> PopcornDotOrg</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
      <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
      <meta name=viewport content='width=815'>
	  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  </head>
  <body>
	<div class="wrapper">
          <div class="header">
                <div class="titlehead">
                  <a href="index.php"><img class="logo" src="logoScaled.png" alt="logo"/></a>
                  <h1>PopcornDotOrg</h1>
            </div>
          </div>
          <div class="navBar">
            <nav class="nav">
                <ul>
                    <li><a href="#">Recent</a></li>
                    <li><a href="#">Popular</a></li>
                    <li><a href="archive.php">Archive</a></li>
                </ul>
            </nav>
        </div>
		<div class="images">
			<!--<h2>These muffins are terrible</h2>-->
			<p><img alt="logo" src="logo.png"/></p>
		</div>
	</div>
  </body>
</html>

最佳答案

.navBar 中的 float: left 和 width: 50% 是导致问题的原因。尝试删除 float:left 会起作用。

此外，尝试从以下 css 类中删除 >，因为您的 img 标签没有直接嵌套在 div 中，带有 css 类 .images

.images img {
  display: block;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

这是工作版本。

html {
  font-family: 'Ubuntu', sans-serif;
  overflow: hidden;
}
html>a {
  text-decoration: none;
  list-style-type: none;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.header {
  position: relative;
  width: 100%;
  background-color: black;
  /*#00FF00*/
  margin: 0px;
  padding: 0px;
  z-index: -100;
  font-size: 2em;
}
.header>h1 {
  position: relative;
  float: right;
}
.titlehead {
  color: white;
}
.logo {
  z-index: 1;
  float: left;
}
.navBar {
  position: relative;
  top: 15%;
  width: 50%;
  overflow: hidden;
}
.nav {
  color: black;
}
.nav>ul {
  list-style-type: none;
  height: 100%;
}
.nav>ul>li {
  text-decoration: none;
  float: left;
}
.nav>ul>li:hover {
  -webkit-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
  -moz-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
  -o-transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
  transition: all 100ms cubic-bezier(0.380, 0.410, 0.605, 0.625);
  /* custom */
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-bottom-color: black;
  ;
}
.nav>ul>li>a {
  list-style-type: none;
  text-decoration: none;
  padding: 15px;
  font-size: 1.7em;
  color: black;
}
.images {
  width: 100%;
  position: relative;
  top: 100px;
  text-align: center;
}
.images img {
  display: block;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.images >p {
  display: block;
  margin: auto;
  text-align: center;
}
#melita {
  position: relative;
  top: -15%;
  transform: translateY(15%);
  width: 100%;
}
.wrapper {
  /*-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;*/
}
.content {
  /*position:relative;
	top:50%;*/
}
<div class="wrapper">
  <div class="header">
    <div class="titlehead">
      <a href="index.php">
        <img class="logo" src="logoScaled.png" alt="logo" />
      </a>
      <h1>PopcornDotOrg</h1>
    </div>
  </div>
  <div class="navBar">
    <nav class="nav">
      <ul>
        <li><a href="#">Recent</a>
        </li>
        <li><a href="#">Popular</a>
        </li>
        <li><a href="archive.php">Archive</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="images">
    <!--<h2>These muffins are terrible</h2>-->
    <p>
      <img alt="logo" src="http://www.online-image-editor.com/help/images/photo_border.png" />
    </p>
  </div>
</div>

关于html - 图像不在大屏幕上居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38236970/

25 4 0
文章推荐： Python 除法返回错误结果
文章推荐： c# - 你将如何在 C# 中创建表达式解析器？
文章推荐： python - 如何刷新 PCF 上托管的 python CGI 文件中的 STDOUT？
文章推荐： c# - 如何从 C# 中的简单数组中获取元素？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com