div中的垂直对齐中间文本不起作用

Question

我有这样的代码：

<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 -->

   

我想垂直对齐div中间的p标签，图像向左浮动，div.box:last-child有margin-left：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：last-child？

Answer 1

在这里你有一些修复：

• p和img以及display：inline
• 正在使用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 */

结果截图：

Answer 2

p元素是段落 - 因此它们具有display：block的默认属性。使用其他元素，例如span。 或者，您可以更改p dom元素的显示属性，例如更改为display:inline。

更新 - 应将垂直对齐'vertical-align：middle'的属性应用于图像。

此外 - 您的样式嵌套似乎有误，请参阅下面的工作示例。

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

Answer 3

你的结构还可以。 要使用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}

根据内容设置填充边距。