居中一個元素與相鄰的元素

Question

我基本上有一個按鈕，我需要對齊中心。在該按鈕旁邊，我需要顯示一些內容（例如複選標記）。我一直在試圖做到這一點，但遇到了一個問題： 1）如果我使用display：inline我不能居中它 2）如果我使用display：block我不能在旁邊添加另一個元素

我一直在試圖與顯示弄明白：inline-block的無濟於事

JFiddle：https://jsfiddle.net/2x5a5zdx/

代碼：

<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中，並將其文本對齊屬性設置爲居中。

<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主要標籤那樣的，所以這段代碼被再次小幅改動，增加的跨度反饋文本（如果你喜歡），但通過設置跨度的類來添加檢查或交叉（以及顏色）。通過簡單地將類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 ✔ */ 
 
    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>