如何居中對齊兩張圖片在jQuery Mobile的

如何對齊兩張圖片，讓他們使用JqueryMobile和遠時從兩邊都是DIV的中心？ - p - p--如何居中對齊兩張圖片在jQuery Mobile的

<div class="ui-grid-a" style="margin: 10px;""> 
      <div class="ui-block-a" id="pic" align="center"> 
       <img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/> 
      </div> 
      <div class="ui-block-b"> 
       <label>&nbsp</label> 
      </div> 
      <div class="ui-block-c" id="pic" align="center"> 
       <img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/> 
      </div> 
     </div> 

<style> 

    div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px 
     text-align:center; background-color: white; margin: 0 auto;} 
</style>

第二個問題是，什麼是正確的方式來彌補差距之間的差距？我現在使用空div，但我認爲可能會有更好的東西？

乾杯，薩米

來源

2012-07-17 Sami

你的代碼中有一個錯誤：ID必須是唯一的* *！使用圖片作爲類，而不要使用align = center作爲屬性。 – 2012-07-17 18:25:01

我得到它的工作。我想這不是那麼複雜的解決方案，但它工作。

.pics { 
    background-color: white; 
    border-radius: 15px; 
    border: 4px solid grey; 
    height: 130px; 
    padding: 0px; 
    text-align: center; 
    width: 130px !important; 
} 
.picLeft { 
    float:left; 
    margin-left: 10px !important; 

} 

.picRight { 
    float:right; 
    margin-right: 10px !important; 

}

我接受任何更好的解決方案，並感謝Torsten！薩米

來源

2012-07-17 20:22:52 Sami

因爲您使用類，您可以加入一些屬性，只需將一個類給予兩個圖像容器，並且您可以擺脫一半的代碼。 – 2012-07-17 21:20:24

和float：right和float：left去哪裏？ – Sami 2012-07-17 22:53:54

我會編輯你的答案;） – 2012-07-17 23:05:13

您可以隨時添加CSS到並覆蓋，當你插入你的CSS 後的JQM CSS鏈接JQM的東西。我把你的代碼修改了一下，所以它應該給你一個開始的蓬。我不知道您的或JQM css中是否有任何干擾，因爲我現在無法嘗試。

在我的情況下，CSS絕不小，因爲所有的兼容性CSS（前綴屬性）的。但優點是盒子佈局更加靈活，因爲它也允許將內容集中在兩個方向上，並且還允許分類和對齊。

http://www.w3.org/TR/css3-flexbox/

這只是一個替代品。

http://dabblet.com/gist/3132163

來源

2012-07-17 18:23:27

他們彼此之間（不完全）與你的那些CSS類。我對CSS的工作人員如此糟糕... :(你的意思是我需要的CSS類僅適用於UI併網一個我試圖讓一個又一個這樣的：.PIC { 邊界：4PX灰色實; 邊界-radius：15像素; 寬度：130px; ------->不工作高度：130px; 文本對齊：中心; 背景顏色：白色; 餘量：4像素; 填充：0像素; }當然寬度不工作;與div的是該行的50％，而不是130像素了。 – Sami 2012-07-17 20:01:17

JQM.css被重寫我的CSS，這就是爲什麼寬度不工作的.ui網-A的.ui - 嵌段 - 一個，的.ui-網格一個的.ui - 嵌段 - b {寬度：49.95％;} 的.ui柵-A>：第n個孩子（N）{寬度：50％;餘量右： - .5px;} .ui-grid-a .ui-block-a {clear：left; } – Sami 2012-07-17 20:09:55

如何居中對齊兩張圖片在jQuery Mobile的

回答

相關問題