Question

我需要一些帮助来集中我的一些代码。我不确定我是否使用了错误的居中方法，但它对我来说并不是很有效。它是HTML代码，但应编码为用于移动用途。我的代码的问题在于按钮容器不会在屏幕上居中，而是保持左对齐。

.btn-container {
  margin: 0 auto;
  align-content: center;
  display: flex;
  border: none;
}

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
  float: left;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

<body>
  <div class="destination-title">
    <a>Choose Your Destination</a>
  </div>

  <div class="btn-container">
    <div class="btn-group">
      <button>Opt 1</button>
      <button>Opt 2</button>
      <button>Opt 3</button>
      <button>Opt 4</button>
      <button>Opt 5</button>
      <button>Opt 6</button>
    </div>
  </div>

  <div class="button-divider"></div>

  <div>
    <button class="continue-button"> <ahref="customize.html">Continue</a></button>
  </div>
</body>

Answer 1

以下In [46]: df = pd.DataFrame({'col_1': [2,2,2,3,3,3,3], : 'col_2': [1,2,3,1,2,3,4], : 'col_3':['A','A','A','B','B','B','B']}) In [47]: df['cond_val'] = (df.col_1 >= df.col_2) * df.col_2 In [48]: df Out[48]: col_1 col_2 col_3 cond_val 0 2 1 A 1 1 2 2 A 2 2 2 3 A 0 3 3 1 B 1 4 3 2 B 2 5 3 3 B 3 6 3 4 B 0 In [50]: df.groupby('col_3').cond_val.sum() Out[50]: col_3 A 3 B 6 Name: cond_val, dtype: int64将使flex项目在任何屏幕分辨率下居中。对于外部容器CSS，请使用.btn-container而不是justify-content: center。内部容器align-content: center需要与其父容器相同的.btn-group规则。

flexbox

如评论中所述，您不应将.btn-container, .btn-group { justify-content: center; display: flex; flex-wrap: wrap; }与float混合使用。我从您的flexbox以及您添加的float中删除了CSS属性。发明此hack是为了处理浮动内容。 clearfix hack没有这个问题。

演示

Flexbox

.btn-container {
  margin: 0 auto;
  border: none;
}

.btn-container,
.btn-group {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
}

Answer 2

您可以添加justify-content：center;在.btn-container类中

.btn-container {
  margin: 0 auto;
  align-content: center;  /*Could probably be removed.*/
  justify-content: center; /*Try adding this according to https://www.addtoany.com/buttons/customize/center_align_buttons*/
  display: flex;
  border: none;
}

居中按钮和容器

2 个答案: