需要幫助集中在引導列內的div

-2

我需要您的幫助我想在每個列內使用4個等寬引導列和內容（讓我們說一個矩形）做一個頁面。但是，我似乎無法找到將每個矩形集中放置在列內的方法。我需要你的幫助來找到一種方法來中心定位矩形，而不會破壞頁面的響應式佈局。需要幫助集中在引導列內的div

<div class="container-fluid"> 

    <div class="border row"> 

    <div class="border col-md-3"><div class="rectangles"></div></div> 

    <div class="border col-md-3"><div class="rectangles"></div></div> 

    <div class="border col-md-3"><div class="rectangles"></div></div> 

    <div class="border col-md-3"><div class="rectangles"></div></div> 

    </div> 
    </div>

來源

2017-06-06 Jay

爲什麼不使用add'text-align：center; margin：auto;' –

發佈代碼。你是指垂直還是水平中心？ – ZimSystem

我做了，但我搞砸了，它並沒有顯示在我的問題。我已編輯它，它現在在那裏。水平中心 – Jay

這是你在找什麼？看完整頁面。

.rectangles1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: purple; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.rectangles4 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    text-align: center; 
 
    margin: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 

 
    <div class="border row"> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles1"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles2"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles3"></div> 
 
    </div> 
 

 
    <div class="border col-sm-3"> 
 
     <div class="rectangles4"></div> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2017-06-06 17:52:06

是的，先生，謝謝你的幫助我是web開發新手，這是一個很大的幫助 – Jay

你可以隨時將col-sm-3更改爲col-xs-3，或者改變矩形的寬度這個視口的大小會影響它的顯示效果 –

如果有幫助，請投票表決：（ –

你可以嘗試柔性盒垂直對齊方式。並且你想把這個添加到你想要你的矩形居中的父div（我爲你的矩形制作的列）

.aligner{ 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
}

來源

2017-06-06 23:27:39

需要幫助集中在引導列內的div

回答

相關問題