【问题标题】：Vertical align middle text in div not workingdiv中的垂直对齐中间文本不起作用
【发布时间】：2014-03-13 07:12:28
【问题描述】：

我有这样的代码：

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

【问题讨论】：

不是valign: middle;，而是vertical-align:middle
这是现场演示，请查看baogiadientu.com/demo/home/news.php。它在页面底部:)
这不是 CSS。 CSS 没有嵌套规则。
它嵌套在less或SCSS中
@c-smile 当然，它的 css 更少。请在baogiadientu.com/demo/home/news.php查看我的现场演示

标签： css html

【解决方案1】：

这里有一些修复：

p 和 img with 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 */

结果截图：

【讨论】：

不行，放个图就知道了。不过我的有;)
@GreedyMan 我看过你的现场演示，这是基于那个结构
你忘记了剩下的 1% 余量是问题的主要问题......
是的，我忽略了问题的第二个（不是“主要”）部分，我给你投票来回答那个部分。然而，这个答案忽略了对齐部分（这是你原来的 jsfiddle.net/2HX6C/1/ ，PntScr: iliannikolov.com/misaligned.jpg ）；）

【解决方案2】：

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

更新 - 应该将垂直对齐“vertical-align:middle”的属性应用于图像。

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

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

【讨论】：

我刚改了，但什么也没发生 :(
你的回答不靠谱。这是现场演示，请参阅 baogiadientu.com/demo/home/news.php。它在页面底部:)
问题是“如何垂直对齐文本并保持边距 1% div.boxes:last-child？”。小提琴中的文本显示为中间垂直对齐，因此 - 答案确实有效。正如我在回答中所说 - 您的代码还有很多其他问题 - 嵌套 css、滥用 dom 元素等。

【解决方案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}

根据内容设置内边距。

【讨论】：