Question

我有一个快速响应的网站，在我有2个按钮的其中一个页面上，当屏幕尺寸足够宽以适合两个按钮时，它们彼此相邻，当页面变小时（例如智能手机）然后第二个按钮（右）低于第一个按钮。这很好。

然而，当按钮位于另一个上方时，它们位于左侧，我想将它们居中。

我的基础是：http://jsfiddle.net/erenyener/puA72/2/

这是一个JS小提琴：https://jsfiddle.net/kg2grant/

以下是代码：

HTML

<div class="button-wrapper">

<div class="fiftyLEFT" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div>

<div class="fiftyRIGHT"><button onclick="location.href='https://google.com';" class="submit" style="font-size: 22px; width: 500px" value="show" name="show_button">Google</button></div>

</div>

CSS

button.submit {
  border: none; 
  background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%);
  border-radius: 100px; 
  max-width: 90%; 
  margin-right: 5%; 
  padding: 8px 10px;
  font-size: 26px;
  color: #fff;
  line-height: 30px;
  cursor: pointer;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .3s ease-in-out;
  margin-top: 10px;
  z-index: 1;
  position: relative;
  }

button.submit:hover {
  color: #3193e9; 
  background: #fff;
  }

button.submit {
  width: calc(.5px + 50vw);
  }

button.submit img: hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important;
  }

.button-wrapper
{
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    display:inline-block;
    border: 3px solid black
}

.button-wrapper > .fiftyLEFT
{
    width:50%;
    float:left;
    min-width:50px
}

.button-wrapper > .fiftyRIGHT
{
    min-width:400px;
    width:50%;
    float:left;
    white-space: nowrap;   
}

我尝试过许多喜欢margin 0 auto的东西并添加另一个容器然而没有运气！在此先感谢您的帮助。

Answer 1

您可以将显示更改为flex，并使用@media查询实现您的目标。

分叉jsFiddle所需的行为：https://jsfiddle.net/o1gpcLcr/

Answer 2

您必须删除浮动左侧属性才能自动执行边距。

.button-wrapper > .fiftyLEFT {
    width: 50%;
    /* float: left; */
    min-width: 50px;
    margin-left: auto;
    margin-right: auto;
}

.button-wrapper > .fiftyRIGHT {
    min-width: 400px;
    width: 50%;
    /* float: left; */
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

然后使用@media（min-width：768px）或任何你希望它打破的地方，在大屏幕上留下浮动。

Answer 3

使用float会使margin自动表现异常，因为浮动元素已从常规内容流中删除。如果您从最近的两个CSS规则中删除float: left并声明margin: auto，它应该有效。

或者，您可以删除float: left，然后添加

display: flex;
flex-flow: column;
justify-content: center;
align-items: center;

到.button-wrapper规则。使用flexbox与margin auto具有相同的效果，但可以在开发后期更容易地进行其他更改和添加。要了解有关flexbox的更多信息，请查看https://flexbox.io以获取一些精彩的视频教程。

Answer 4

您需要使用CSS媒体查询，更多的是“移动优先”方法。

按钮宽度：默认为100％，然后使用@media（min-width：768px）{...}将宽度更改为50％。

我对您的代码进行了一些更改：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[1]" value="ch01">CH01</label>
    <input type="text" name="ch_for[1]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>
<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[1]" value="ch02">CH02</label>
    <input type="text" name="ch_for[2]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>
<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[2]" value="ch03">CH02</label>
    <input type="text" name="ch_for[3]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>
<div class="checkbox form-inline">
    <label><input type="checkbox" name="ch_name[3]" value="ch04">CH04</label>
    <input type="text" name="ch_for[4]" value="" placeholder="Channel details"  class="form-control ch_for">
</div>

button.submit {
  border: none; 
  background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%);
  border-radius: 100px; 
  padding: 8px 10px;
  margin: 5px 0;
  font-size: 26px;
  color: #fff;
  line-height: 30px;
  cursor: pointer;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .3s ease-in-out;
  z-index: 1;
  position: relative;
}

button.submit:hover {
  color: #3193e9; 
  background: #fff;
}

button.submit img: hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important;
}

.button-wrapper {
  width:100%;
  padding: 10px 0;
  display:inline-block;
  border: 3px solid black
}

button {
  width: 100%;
}

@media (min-width: 768px) {
  button {
    float: left;
    width: 50%;
    white-space: nowrap; 
  }
}

响应网站上的中心按钮

4 个答案: