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 with display：inline
• 它正在vertical-align:middle;
• 制作父display: table

編輯：你正在使用填充和寬度：你需要一個額外的div，並且對於表，你需要一個額外的單元格來“分離”，檢查出來：

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

小提琴

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屬性，例如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}

根據內容設置填充邊距。