當屏幕分辨率爲768時，我需要中心號碼4,5塊。請參閱我的截圖和我的源代碼。css中包含div元素的內容元素

當前視圖 enter image description here

應然

enter image description here

這裏是我的代碼

  <div class="home-property-list"> 
       <div class="prop-sub"> 
        <div class="home-property-list-item">1</div> 
        <div class="home-property-list-item">2</div> 
        <div class="home-property-list-item">3</div> 
       </div> 
       <div class="prop-sub"> 
        <div class="home-property-list-item">4</div> 
        <div class="home-property-list-item">5</div> 
       </div> 
      </div>

CSS樣式

.home-property-list{ 
    width: 100%; 
    height: auto; 
    float: left; 
} 
.home-property-list-item{ 
    width: 19.6%; 
    height: auto; 
    float: left; 
    margin: 0 0.2%; 
    background: #F00; 
} 

@media only screen and (max-width: 768px) { 
.prop-sub{ 
    width: 100%; 
    height: auto; 
    float: left; 
    margin-bottom: 10px; 
} 
.home-property-list-item{ 
    width: 32.9%; 
} 
}

來源

2014-03-27 JWarker

在.home- property-list-item use display：inline-block;而不是float：left;並在.home屬性列表 – Germain

Demo Fiddle

您需要添加text-align:center到包裝div然後保證孩子elemtns有display:inline-block;

更改您的CSS（例如）：

.home-property-list { 
    width: 100%; 
} 
.prop-sub{  
    text-align:center; 
} 
.home-property-list-item { 
    width: 19.6%;  
    display:inline-block; 
    margin: 1%; 
    background: #F00; 
} 
@media only screen and (max-width: 768px) { 
    .prop-sub { 
     width: 100%; 
     height: auto; 
     float: left; 
     margin-bottom: 10px; 
    } 
    .home-property-list-item { 
     width: 32.9%; 
    }

來源

2014-03-27 10:34:18 SW4

上應用文本對齊中心謝謝。這對我有用。 – JWarker

css中包含div元素的內容元素

回答

Demo Fiddle

相關問題