堆栈内存溢出
  简体   繁体   English

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

[英]How can I remove the padding and center this element?

 原文  2018-08-08 18:34:57  7   1    html/ css/ flexbox

问题描述

I've been trying to center and remove the bottom-padding of the 'filter' image for a couple hours now but can't seem to do it. 我已经尝试集中和删除“过滤器”图像的底部填充了两个小时，但似乎无法做到。 It's probably a really simple fix, but I'm pretty new to CSS, HTML and flexbox and the solution has escaped me so far! 这可能是一个非常简单的修复程序，但是我对CSS，HTML和flexbox还是很陌生，到目前为止，该解决方案对我而言还是意义深远！ If someone could point me in the right direction, that would be awesome. 如果有人能指出我正确的方向，那就太好了。

屏幕截图

HTML 的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 的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;
}

1 个解决方案

解决方案1
 0 已采纳  2018-08-08 18:45:42

Add this to ur css 将此添加到ur css 

.filterbutton img{
    display: block;
}

img tags have little space below them img标签下面没有空间

The above css will remove the space below the img tag by making the image display: block; 上面的css通过使图像display: block;来删除img标签下面的空间display: block; , which is display:inline by default. ，默认为display:inline 。

The space you are seeing is for descenders. 您看到的空间是供后代使用的。 This space is kept for characters like "y" ,"p". 为“ y”，“ p”等字符保留此空间。

As for the centering of the label, width:50%, means the parent will try to center the entire container(50% width), that is y, the label didnt look centered. 至于标签的居中，宽度：50％，表示父对象将尝试使整个容器居中（宽度为50％），即y，标签看起来没有居中。

Add width to label, to center it 为标签增加宽度，使其居中 

 @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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从元素中删除填充属性？ （CSS） - How can I remove padding property from an element? (CSS) 如何删除 TimelineItem 上的左侧填充？ - How can I remove left padding on TimelineItem? 如何删除浮动边距或填充？ - How can I remove float margin or padding? 如何使元素中的文本居中？ - How can I center text in an element? 如何水平居中元素？ - How can I horizontally center an element? 如何将元素居中放置在视口中间？ - How can I center an element in the middle of the viewport? 我如何在此内联元素垂直居中？ - How can I vertically center this inline element? 无法删除浮动元素的填充/边距 - Can't remove padding/margin of a floated element 如何删除第二个和第三个块的上部填充？ - How can I remove the upper padding of the second and third blocks? 如何在移动屏幕上删除 bootstrap jumbotron 的填充？ - How can I remove the padding of the bootstrap jumbotron on the mobile screen?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM