Question

我基本上有一个按钮，我需要对齐中心。在该按钮旁边，我需要显示一些内容（例如复选标记）。我一直试图这样做，但遇到了一个问题： 1）如果我使用显示：内联我不能居中 2）如果我使用display：block我不能在它旁边添加另一个元素

我一直试图用display来解决这个问题：inline-block无济于事

代码：

<input  type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
    <span class="green-success" id="surveySuccess" >&#10004</span>
    <span class="red-danger" id="surveyFailure" >&#10006</span>

然后是css

#submitBttn {
margin:auto;
display:inline-block;
}

#surveySuccess, #surveyFailure {

}

谢谢

Answer 1

正如您所指出的，margin: auto不会使inline元素居中。

由于inline / inline-block级别元素尊重text-align property，您只需将text-align: center添加到父元素即可。这样，子元素将居中，因为它们默认为inline。

Updated Example

.parent-element {
    text-align: center;
}
.parent-element > span,
.parent-element > input {
    display: inline-block;   /* Added for example purposes */
    vertical-align: middle;
}

或者，in supported browsers，您也可以utilize flexbox layouts并将父元素的display设置为flex并添加justify-content: center以进行水平居中：

Updated Example

.parent-element {
    display: flex;
    justify-content: center;
}

Answer 2

要在页面上水平居中显示按钮和图标，请将它们包装在div中并将其text-align属性设置为居中。

<div id="wrapper">
    <input  type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn"/>
    <span class="green-success" id="surveySuccess" >&#10004</span>
    <span class="red-danger" id="surveyFailure" >&#10006</span>
</div>

#wrapper {
    text-align: center;
}

Answer 3

<强>基本

如果您想将按钮和支票集中在一起，整体而言，居中很简单。您只需要将text-align: center添加到父元素（您可能需要介绍）。

.container {
  text-align: center;
}

<div class="container">
  <input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
  <span class="green-success" id="surveySuccess">&#10004</span>
  <span class="red-danger" id="surveyFailure">&#10006 This content <i>does</i> affect centering.</span>
</div>

或者，如果您希望按钮本身居中，无论标签如何，您都可以使用position: absolute将标签拉出流程。如果您想一次只显示一个标签，这将特别有用。如果你同时显示它们，它们将在彼此之上，所以你必须解决它。

.container {
  text-align: center;
}

#surveySuccess, #surveyFailure {
  position: absolute;
  margin-left: 5px;
}

#surveyFailure {
  display: none;
}

<div class="container">
  <input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
  <span class="green-success" id="surveySuccess">&#10004 Button is not moved</span>
  <span class="red-danger" id="surveyFailure">&#10006 Button is not moved</span>
</div>

就个人而言，我想主要通过CSS显示这样的标签，所以这段代码会再次略有改动，在跨度中添加反馈文本（如果你愿意），但添加支票或交叉（和颜色）在CSS中通过设置span的类。只需添加课程success或failure，您就可以更改现在单个'surveyResult'范围的符号和颜色：

.container {
  text-align: center;
}

#surveyResult {
  position: absolute;
  margin-left: 5px;
}

#surveyResult.success {
  color: green;
}
#surveyResult.success::before {
  /* \2714 is the CSS (hexadecimal) notation of &#10004; */
  content: '\2714 ';
}

#surveyResult.failure {
  color: red;
}
#surveyResult.failure::before {
  content: '\2716 ';
}

<div class="container">
  <input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
  <span class="success" id="surveyResult">You did great!</span>
</div>

使元素与相邻元素居中

3 个答案: