Question

几个小时以来，我一直在尝试居中并删除“过滤器”图像的底部填充，但似乎无法做到。这可能是一个非常简单的修复程序，但是我对CSS，HTML和flexbox还是很陌生，到目前为止，该解决方案对我而言还是意义深远！如果有人能指出我正确的方向，那就太好了。

Screenshot

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Some Web Page</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <div class='menu-container'>
      <div class='menu'>
        <div class='links'>
          <div class='signup'>Sign Up</div>
          <div class='login'>Login</div>
        </div>
      </div>
    </div>
    <div class='header-container'>
      <div class='header'>
      </div>
    </div>
    <main>
      <input id="toggle" type="checkbox">
      <label for="toggle">
          <div class="filterbutton"><img src='images/filterbutton.svg'/></div>
      </label>
      <div id="expand">
        <section class="Filter">
        </section>
      </div>
    </main>
    <section class="carousel">
    </section>
  </body>
  <footer>
      <img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
      <img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
      <img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
      <img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
      <ul>
          <a alt="about" title="About" href="#" class="footerlink">About</a>
          <a alt="about" title="About" href="#" class="footerlink">Contact</a>
          <a alt="about" title="About" href="#" class="footerlink">Team</a>
          <a alt="about" title="About" href="#" class="footerlink">Whatever</a>
      </ul>
  </footer>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.menu-container {
  color: #fff;
  background-color: #A34F43;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

.menu {
  width: 100%;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.links {
  display: flex;
  justify-content: flex-end;
}

.login {
  margin-left: 20px;
}

.header-container {
  background-color: #FF7C69;
  display: flex;
  justify-content: center;
}

.header {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-test {
  display: flex;
  justify-content: center;
}

.carousel-grid-container {
  display: flex;
  justify-content: center;
}

.carousel-grid {
  width: 900px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.logo {
  width: 200px;
  display: block;
  margin: 0 auto;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  width: 100%;
}
main {
  background: #FF7C69;
  width: 100%;
  margin: 0px auto;
}

input {
  display: none;
  visibility: hidden;
}
label {
  /* display: block; */
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
label:hover {
  color: #000;
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s;
  background-color: #D6DBED;
  color: #FFF;
}

#toggle:checked ~ #expand {
  height: 250px;
}

footer {
  background-color: #A34F43;
  text-align: right;
  color: #eee;
  text-align: center;
  position: absolute;
  width: 100%; 
  /* display: flex; */
}

.footerlink {
  text-decoration: none;
  color: white;
  text-align: justify;
  display: block;
  padding: 1px;
}

.social {
  padding: 10px;
  width: 50px;
  text-align: right;
  float: right;
}

.social:hover {
  opacity: 0.7;
}

legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}

.output {
  font: 1rem 'Fira Sans', sans-serif;
}

input {
  margin: .4rem;
}

.filterbutton {
  margin: 0px;
  padding: 0px;
  width: 150px;
  display: block;
}

Answer 1

将此添加到urss

.filterbutton img{
    display: block;
}

img标签下方没有空格

上述css将通过使图像display: block;（默认为display:inline）来删除img标签下方的空间。

您看到的空间用于后代。对于“ y”，“ p”之类的字符保留该空间。

关于标签的居中，宽度：50％，表示父级将尝试使整个容器（宽度为50％）居中，即y，标签看起来没有居中。

为标签添加宽度，以使其居中

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.menu-container {
  color: #fff;
  background-color: #A34F43;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

.menu {
  width: 100%;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.links {
  display: flex;
  justify-content: flex-end;
}

.login {
  margin-left: 20px;
}

.header-container {
  background-color: #FF7C69;
  display: flex;
  justify-content: center;
}

.header {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-test {
  display: flex;
  justify-content: center;
}

.carousel-grid-container {
  display: flex;
  justify-content: center;
}

.carousel-grid {
  width: 900px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.logo {
  width: 200px;
  display: block;
  margin: 0 auto;
}

body {
  font-family: "Open Sans", Arial;
  width: 100%;
}

main {
  background: #FF7C69;
  width: 100%;
  margin: 0px auto;
}

input {
  display: none;
  visibility: hidden;
}

label {
  /* display: block; */
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
 width: 100px;
}

label:hover {
  color: #000;
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s;
  background-color: #D6DBED;
  color: #FFF;
}

#toggle:checked~#expand {
  height: 250px;
}

footer {
  background-color: #A34F43;
  text-align: right;
  color: #eee;
  text-align: center;
  position: absolute;
  width: 100%;
  /* display: flex; */
}

.footerlink {
  text-decoration: none;
  color: white;
  text-align: justify;
  display: block;
  padding: 1px;
}

.social {
  padding: 10px;
  width: 50px;
  text-align: right;
  float: right;
}

.social:hover {
  opacity: 0.7;
}

legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}

.output {
  font: 1rem 'Fira Sans', sans-serif;
}

input {
  margin: .4rem;
}

.filterbutton {
  margin: 0px;
  padding: 0px;
  width: 150px;
  display: block;
}

.filterbutton img{
    display: block;
}

<div class='menu-container'>
  <div class='menu'>
    <div class='links'>
      <div class='signup'>Sign Up</div>
      <div class='login'>Login</div>
    </div>
  </div>
</div>
<div class='header-container'>
  <div class='header'>
  </div>
</div>
<main>
  <input id="toggle" type="checkbox">
  <label for="toggle">
          <div class="filterbutton"><img src='https://placehold.it/100x100'/></div>
      </label>
  <div id="expand">
    <section class="Filter">
    </section>
  </div>
</main>
<section class="carousel">
</section>

<footer>
  <img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
  <img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
  <img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
  <img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
  <ul>
    <a alt="about" title="About" href="#" class="footerlink">About</a>
    <a alt="about" title="About" href="#" class="footerlink">Contact</a>
    <a alt="about" title="About" href="#" class="footerlink">Team</a>
    <a alt="about" title="About" href="#" class="footerlink">Whatever</a>
  </ul>
</footer>

如何删除填充并使该元素居中？

1 个答案: