我有这样的代码：垂直居中对齐文本在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：

结果截图：

相关问题