Question

我正在为我的主页按钮添加背景图像，所以代码是（见下文）。在我添加了额外的div（在主myclass div中）后，所有左对齐，我想让它居中。我怎么能这样做？

<div class="myclass">
        <a href="link"><div id="Home"></div></a>
        <a href="link"><div id="About"></div></a>
        <a href="link"><div id="FAQ"></div></a>
        <a href="link"><div id="Contact"></div></a>
</div>

.myclas {
    background:#F5CA0D;
    max-width:100%;
    display: block;
text-align: center;
}

#Home {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("images/Home.jpg");
    float:left;
  clear:right;
}

#Home:hover {
  background-image:url("images/Home-hover.jpg");

}

#About {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("images/About.jpg");
    float:left;
  clear:right;
}

#About:hover {
  background-image:url("images/Oahu-hover.jpg");

}

#FAQ {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("images/FAQ.jpg");
    float:left;
  clear:right;
}

#FAQ:hover {
  background-image:url("images/FAQ-hover.jpg");

}

#Contact {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("images/Contact.jpg");
    float:left;
  clear:right;
}

Answer 1

每个元素都有float: left规则。我会先摆脱它。你可能也不需要clear。

Answer 2

你到处都有float:left，改变这一点，clear:right在这里没用，你也不需要它。使脚本尽可能简短，以便在浏览器中轻松加载

Answer 3

首先修改拼写错误.myclass然后尝试下面

JSFiddle

<强> CSS

.myclass {
    background:#F5CA0D;
    max-width:100%;
    display: block;
    text-align: center;
    width: 100%;
}

.myclass > a, div {
    display: inline-block;

}

#Home {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");
}

#Home:hover {
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

#About {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

#About:hover {
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

#FAQ {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

#FAQ:hover {
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

#Contact {
  margin:0 auto;
  width:211px;
  height:109px;
  transition: background-image 1s ease-in-out;
  background-image:url("http://maps.google.com/mapfiles/kml/pal3/icon55.png");

}

<强> HTML

<div class="myclass">
        <a href="link"><div id="Home"></div>4</a>
        <a href="link"><div id="About"></div>3</a>
        <a href="link"><div id="FAQ"></div>2</a>
        <a href="link"><div id="Contact"></div>1</a>
</div>

Answer 4

Firstable，你的班级名称与html不同（myclas缺少s）。

然而，你不能将主div居中，因为你使用100％的宽度。您可以使用固定宽度而不是边距：0 auto;它会起作用。

Answer 5

您的CSS .myclas {

中有拼写错误

如何将主要内容中包含其他div类的div居中？

5 个答案: