HTML，CSS，Bootstrap - 兩列居中

我想製作一個應該有兩列的小網站，每列應該有其內容居中。HTML，CSS，Bootstrap - 兩列居中

但是，我注意到列將遵循彼此的高度，而不是作爲單獨的列。例如。每當向其中一列添加內容時，其他列的內容將被移動以適應該列的高度。

在JSFiddle中，您可以看到右側的「Hello」並不完全居中;它已經被提升到與左邊三個「Hello」的第一個一致。我希望如此，每當我向一列添加內容時，它不會影響其他列 - 所以右側的「Hello」應該完全保持居中。

JSFiddle：https://jsfiddle.net/goupb2ch/1/

我對這個工作現在相當長一段時間。有任何想法嗎？謝謝！

來源

2017-08-15 thesystem

爲什麼不使用自舉4，利用柔性盒？ Flexbox讓你的願望成真！ – Randy

@Randy感謝您的輸入。如果我沒有得到任何答案，我可能必須這樣做。我剛開始使用3.3.7。因爲它是最新的穩定版本 – thesystem

Bootstrap 4目前非常穩定。我認爲3.3.7將在新項目發佈後迅速被替換，因此學習彈性盒的作用和原因並不會造成什麼影響。如果您閱讀了flex-box的問題，您會發現自己的問題用複雜的代碼或簡單的flexbox解決方案回答了幾次。 – Randy

考慮使用flexbox解決您的問題：在這種情況下，需要的代碼少得多。

https://jsfiddle.net/upwgk2u4/

.container { 
    display: flex; 
    text-align: center; 
    height: 100%; 
} 

.container > div { 
    flex: 1; 
    align-self: center; 
}

來源

2017-08-15 12:42:57 Normangorman

只是要清楚，這個答案與Bootstrap無關。 'display：flex'是一個CSS的東西，而不是Bootstrap的東西。 – Normangorman

@thesystem Flexbox不限於引導程序4，它只是一個CSS規則。 Flexbox在Bootstrap 4中實現，並未在Bootstrap 3中實現，但您可以隨時按照自己的規則擴展CSS並使用Flexbox。請記住，舊版瀏覽器不支持該彈性盒。 – Randy

爲什麼不使用什麼是已經在引導4？ 沒有額外的CSS是必要的。

https://www.codeply.com/go/0zwGz83Cbw

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 text-center"> 
      <p>Hello</p> 
      <p>Hello</p> 
      <p>Hello</p> 
     </div> 
     <div class="col-md-6 align-self-center text-center"> 
      <p>Hello</p> 
     </div> 
    </div> 
</div>

來源

2017-08-15 14:22:55 ZimSystem

HTML，CSS，Bootstrap - 兩列居中

回答

相關問題