Question

这里是div中的元素。我使用媒体查询使它们居中并在全宽度内联我的意思是最小宽度701px并使它们被阻止显示在700px以下。居中工作，但它没有在块显示中显示，而是在一行中显示。但我写道：display：block！important; in .kdown demo：http://buhehe.de/kalender-2018/我的意思是下载日历下的按钮 HTML：

<div class="kdown" id="kdown">  
  <h6> Kalender 2018 Ausdrucken , Download als PDF, Word, Excel oder PNG:</h6>
  <a target="_blank" class="pngg" href="http://buhehe.de/wp-content/kalender-2018.png">
      <img src="http://buhehe.de/wp-content/uploads/2018/01/png-img.png" alt="PNG" />
      <span>Download in PNG</span>
  </a>
  <a class="pdff" target="_blank" href="http://buhehe.de/wp-content/kalender-2018.pdf"> 
      <img src="http://buhehe.de/wp-content/uploads/2018/01/pdf-img.png" alt="PDF" />
      <span>Download in PDF</span> 
  </a>
  <a target="_blank" class="wordd" href="http://buhehe.de/wp-content/kalender-2018.docx">
      <img src="http://buhehe.de/wp-content/uploads/2018/01/word-img.png" alt="Word" />
      <span>Download in Word</span>
  </a>
  <a target="_blank" class="excell" href="http://buhehe.de/wp-content/kalender-2018.xlsx"> 
      <img src="http://buhehe.de/wp-content/uploads/2018/01/Excel-img.png" alt="Excel" />
      <span>Download in Excell</span>
  </a> 
</div>

的CSS：

@media screen and (max-width: 700px) {
     .traki {
        margin-left: 0px !important;
         text-align: center !important;
    }
     .kdown p span {
        position: relative;
         top: -1px !important;
    }
     .kdown h6 {
         font-size: 15px !important;
    }
     .kdown p {
         display: block !important;
    }
}
 @media screen and (min-width: 701px) {
     .kdown p {
         display: inline !important;
    }
     .kdown {
         text-align: center !important;
    }
}
.kdown a {
     width: 160px;
     background-color: #FF9900;
     color: #FFFFFF;
     border-radius: 4px !important;
     height:40px;
     padding: 10px 3px 10px 5px ;
}
 .kdown a:not(:first-child) {
    margin-left: 3px;
}
 .kdown a:hover {
     opacity: 0.8;
     color: #ffffff !important;
}
 .kdown p img {
     width: 25px;
     padding-right: 3px;
     height: 25px;
     position: relative;
     top: 7px;
}

Answer 1

为了使你想要的按钮居中：

@media screen and (max-width: 700px) {
    .kdown > p > a {
    display: block;
    margin: 0 auto;
    }
}

在块元素中使用自动边距使其居中。

Answer 2

有些奇怪的东西，你声明的HTML与网页上的HTML不符。检查那里给出了一个完整的意大利面，运行已弃用的＆＃34;字体＆＃34;标签，按钮和它的内容之间没有关系...试图设置合适的CSS将是神奇的。

尝试使用更符合逻辑的布局。类似的东西：

buttons-container
  button
     a
        img
        text
  button
     a
        img
        text
  button
     a
        img
        text

然后你可以设置容器以显示flex，根据需要设置按钮的样式，将A设置为100％和高度，使它们在整个按钮上工作，并根据需要设置文本和img的样式。

这里是little fiddle to get you started，你可以在那里工作;）也许可以从行到列切换flex-direction，并且只需要调整flex属性;）

尝试使用媒体查询制作元素显示块

2 个答案: