我有這樣的代碼：垂直居中對齊文本在DIV不工作

<div class="more-options clearfix"> 
<div class="boxes"> 
    <img alt="#" src="images/icons/onl-marketing.png"> 
    <p>Online Marketing News</p> 
</div> 
<!-- end .boxes --> 
<div class="boxes"> 
    <img alt="#" src="images/icons/str-success.png"> 
    <p>Stories Success</p> 
</div> 
<!-- end .boxes -->

我想在格垂直對齊p標籤中，圖像左浮動和div.box:last-孩子有餘量：1％;我嘗試這個CSS，但它不工作：

div.more-options { 

    margin: 15px 0; 

    div:first-child { 
     .fleft; 
    } 

    div:last-child { 
     margin-left: 1%; 
    } 
    div.boxes { 
     padding: 20px; 
     width: 49.5%; 
     background: #ecf0f1; 
     min-height: 25px; 
     display: table-cell; 
     vertical-align: middle; 

     img { 
      .fleft; 
      margin-right: 25px; 
      .img-responsive; 
      max-width: 25%!important; 
     } 
     p { 
      .fontfc(26px, #666666); 
     } 
    } 
    /* end div.boxes */ 
} 
/* end div.more-options */

我垂直對齊文本以及如何保持利潤率1％div.boxes：最後一個孩子？

來源

2014-02-14 Greedy Man

js小提琴請 – underscore

不是'valign：middle;'但是'vertical-align：middle' –

這是現場演示，請參閱http://baogiadientu.com/demo/home/news.php。它在頁面的底部:) –

在這裏你有一些修正：

p和img與顯示：內聯
它的工作vertical-align:middle;
使得父display: table

編輯：您正在使用的填充和寬度：你將需要爲這個額外的DIV，並用表，你需要爲「分離」一個額外的電池，檢查了這一點：

與垂直圖像更新的鏈接對準太：

的fiddle

HTML：

<div class="more-options clearfix"> 
<div class="boxes"> 
    <div class="in"> 
     <img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png"> 
     <p>Online Marketing News</p> 
    </div> 
</div> 
<!-- end .boxes --> 
    <div class="separation"></div> 
<div class="boxes"> 
    <div class="in"> 
     <img alt="#" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Banana-icon.png"> 
     <p>Stories Success</p> 
    </div> 
</div> 
<!-- end .boxes -->

CSS：

div.more-options { 

    margin: 15px 0; 

    div:first-child { 
    } 

    div.separation { 
     width: 1%; 
      display: table-cell; 
    } 
     div.in{ 
      padding:20px; 
     } 
    div.boxes { 
     width: 49.5%; 
     background: #ecf0f1; 
     min-height: 25px; 
     display: table-cell; 
     vertical-align: middle; 

     img { 
      display: inline-block; 
      margin-right: 25px; 
      .img-responsive; 
      max-width: 25%!important; 
       vertical-align: middle; 
     } 
     p { 
      .fontfc(26px, #666666); 
      display: inline-block; 
     } 
    } 
    /* end div.boxes */ 
} 
/* end div.more-options */

結果截圖：

來源

2014-02-14 04:21:47

無法正常工作，放置圖像，你會看到。我的確不過;） –

我看到你的破：P http://puu.sh/6Vqro.jpg –

@GreedyMan我看到你的現場演示，這是基於該結構 –

p元素是段落 - 因此它們具有display：block的默認屬性。使用另一個元素，例如span。或者，您可以更改頁面元素的顯示屬性，例如display:inline。

更新 - 垂直對齊屬性vertical-align：middle應該應用於圖像。

此外 - 您的樣式嵌套似乎是錯誤的，請參閱下面的工作示例。

例（更新）： http://jsfiddle.net/YwV54/2/

來源

2014-02-14 04:10:30

我只是改變了，但沒有發生:( –

查看更新的答案 –

你的回答不包括這是現場演示，請參閱baogiadientu.com/demo/home/news .php。它位於頁面底部:) –

你的結構是確定的。爲了vertical-align:middle你需要使用表結構使用方法：根據內容

 #wrapper div#main-content div.more-options div.boxes{display:table;} 
    #wrapper div#main-content div.more-options div.boxes p{verticle-align:middle;} 

    #wrapper div#main-content div.more-options div.boxes img{max-width:25% !important; remove this}

設置填充保證金。

來源

2014-02-14 05:42:22 user3302090

垂直居中對齊文本在DIV不工作

回答

的fiddle

HTML：

CSS：

結果截圖：

相關問題