Question

我有三个按钮，其中两个仅出现在移动大小的屏幕上。我希望所有三个按钮都能在各种移动尺寸屏幕上保持居中，但其中两个（电子邮件和电话）不会保持居中。

这两个根据屏幕调整现在还没有适用。如何让它们居中？

这是我的代码笔：codepen

这是相关的html：

<div id="directions" class="container–fluid">
  <div class="container">
  <!-- Example row of columns -->
  <div class="row" id="ab">
    <div class="col-md-6">
      <h2><img class="img–responsive" src="img/logo1_03.png"></h2>
          <div id="dd">
          <a class="btn btn-success btn-lg myButton" href="#" role="button">Apply Now &raquo;</a>
          <div id="dd">
          <a class="btn btn-info visible-xs btn-lg myButton" href="#"  role="button">Email &raquo;</a>
          </div>
          <div id="dd"><a class="btn btn-success visible-xs btn-lg myButton" href="#" role="button">Call &raquo;</a>
          </div>
        <br>
        <br> 
        <br>
      <div class="row" id="cb">
        <div class="col-md-10 hidden-xs">
        <p id="shop">Shop Smart</p>
        <p id="save">Save Smart</p>
        </div>
        </div>
        </div>
      </div>
    <div class="col-md-3">
      <form class="hidden-sm hidden-xs well" id="contact" role="form">
      <h1>Contact us</h1>
    <div class="form-group">
      <input type="text" class="form-control" id="firstname" placeholder="First Name">
    </div>             
    <div class="form-group">          
      <input type="text" class="form-control" id="lastname" placeholder="Last Name">
    </div>          
    <div class="form-group">          
      <input type="text" class="form-control" id="companyname" placeholder="Company   Name">
    </div>        


    <div class="form-group">   
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">        
      <input type="tel" class="form-control" id="exampleInputtel1" placeholder="Phone">
    </div>             

    <button type="submit" class="btn btn-default">  Submit</button>
    </form>

   </div>
  </div>

</div>  
  </div> 


  </div>

</div>

这是我的CSS（不是引导程序）：

#directions{
height: 500px;
background-image: url("../img/terminals-body2feather.jpg");
background-repeat: no-repeat;
background-position:center;
background-color: white;
border: 5px solid black;

}

/*.jumbotron {
background-image: url("../img/terminals-body2feather.jpg");
height: 500px;
background-repeat: no-repeat;
background-position:center;
background-color: white;
line-height: 0;
border: 2px solid black;
}*/

#logo{

margin-top: 1em;
border: 2px solid black;  

}

#contact{
border: 2px solid black;
width: 300px; 
padding-top: 10px;
margin-top: 20px;
}

#contact h1{
text-align: center;
margin-bottom: 5px;
margin-top: 0px;
} 

#ab{
border: 2px solid black;  
}

#cb{
height: 250px;
}
.col–md–5{

}


.col–md–4{
height: 160px;
border: 2px solid black;
text-align: center;
margin-top: 1em;
}

#head {
line-height: 0;
} 

#shop {
background-color: rgba(0, 0, 0, 0.498);
font: 64px 'roboto';
color: #FFF;
margin-bottom: 0px;
margin-top: 20px;
text-align: center;

}

#save {

background-color: rgba(0, 0, 0, 0.498);
font: 78px/70px 'roboto';
color: #1A8AF7;
margin-bottom: 0px;
padding-bottom: 5px;
text-align: center;
}

#adv {
text-align: center;
border: 2px solid black;
}

.myButton {
width: 150px;
}





@media (min-width: 768px) and (max-width: 1160px) {
.nav > li > a {

font-size: 12px;
padding-left: 10px;
padding-right: 10px;  }

 #top {
padding-right:0px;
padding-left:0px;
 }
 h2{
text-align:center;
}
#dd {
margin:0 auto;
width:50%;
text-align: center;
}

#shop {
font: 44px 'roboto';}

#save {
font: 58px/55px 'roboto';
}

}



@media (max-width: 767px) {
#directions{
height: 300px;
}
h2{
text-align:center;

}

#dd {
margin:15px auto;
width:50%;
text-align: center;

我无法识别“立即申请”和其他两个按钮之间的CSS差异。

Answer 1

不同之处在于另外两个按钮被包含在另一个#dd内。知道在一个页面上有多个具有相同名称的id是无效的html。而是使用类。

Answer 2

您错过了</div>

<div id="dd">
    <a class="btn btn-success btn-lg myButton" href="#" role="button">Apply Now &raquo;</a>
</div> <!-- You're missing this close DIV! -->

<div id="dd">
    <a class="btn btn-info visible-xs btn-lg myButton" href="#"  role="button">Email &raquo;</a>
</div>

<div id="dd">
    <a class="btn btn-success visible-xs btn-lg myButton" href="#" role="button">Call &raquo;</a>
</div>

Answer 3

引导类visible-xs创建了两个按钮display:block。当我将显示更改为display:inline-block时，text-align:center的定心方法已成功。

中心引导3按钮

3 个答案: