图片不以大屏幕为中心

时间：2016-07-07 03:04:41

标签： html css image

我试图将图像置于导航下方的网站中心。它适用于所有浏览器中较小的屏幕，但是，在较大的屏幕上，它不会集中在任何浏览器中。我尝试用'p'标签包装图像并使用text-align来居中它，但它没有用。我咨询了其他更了解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>

4 个答案:

答案 0 :(得分：2)

float: left中的width: 50%和.navBar是造成问题的原因。尝试删除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>

答案 1 :(得分：2)

图片不是中心因为.clear-fix具有.navBar属性;

添加一个名为.clear-fix { clear: both; } 的新类，然后在<div class="navBar"></div> <div class="clear-fix"></div> <---- New here 之后再添加一个div：

{{1}}

HTML code：

在线查看结果：https://jsfiddle.net/1q0o88eh/2/ 

{{1}}

答案 2 :(得分：1)

<强>问题：

问题在于您使用导航栏设置样式的方式，您正在使用float: left;和width: 50%;，所以当图像和导航条都适合x轴时，它们将在每个旁边显示其他。这就是为什么这种情况发生在更大的屏幕上，视口大到足以让两者适合。

<强> SOLUTION：

替换：

.navBar{
  position:relative;
  top:15%;
  float:left;
  width:50%;
  overflow:hidden;
}

使用：

.navBar{
  position:relative;
  top:15%;
  overflow:hidden;
}

<强> JSFiddle

CODE SNIPPET 

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%;
  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 {
  position: relative;
  top: 100px;
  text-align: center;
}
.images>img {
  display: block;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
#melita {
  position: relative;
  top: -15%;
  transform: translateY(15%);
}
.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="http://placehold.it/74x74" 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>-->
    <img alt="logo" src="http://placehold.it/200x200" />
  </div>
</div>

答案 3 :(得分：0)

Fiddle here 

.clear-fix{
  clear: both;
}    
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;
}
#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%;*/
}




.images{
	width:100%;
	position:relative;
	text-align:center;
}
.images>img{
	display:block;
	width:500px;
	margin-left:auto;
	margin-right:auto;
}
<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="clear-fix"></div>
		<div class="images">
			<!--<h2>These muffins are terrible</h2>-->
			<img alt="logo" src="http://videohoconline.edu.vn/upload/images/video-day-seo-online_thumb.jpg"/>
		</div>
	</div>

相关问题
最新问题