Question

前言：我遇到了许多其他解决方案，但没有找到有效的解决方案。我目前正在使用this答案将我的文字对齐到我的div的底部，但没有任何运气。

无论出于何种原因，我的vertical-align: bottom;属性根本不会影响页面的css。如果我想将文本对齐到图像的底部，我在这里做错了什么？

的index.html

<body>
    <div class="header">
        <div class="container">
            <div class="pull-left">
                <a href="">What's This?</a>
            </div>
            <img src="http://placehold.it/75x75" />
            <div class="pull-right">
                <a href="">About</a>
            </div>
        </div>
    </div>

<!-- Modules -->

<!-- Controllers -->

<!-- Services -->

</body>

的main.css

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

body {
    background-color: #FF3B4E;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    background-color: white;
    text-align: center;
    height: 125px;
}

.header img {
    margin: 25px 0;
}

.header .pull-left{
    border: 1px solid black;
    height: 75px;
    margin-top: 25px;
    top: 0;
    line-height: 75px;
    vertical-align: bottom;
}

.header .pull-right {
    border: 1px solid black;
    height: 75px;
    margin-top: 25px;
    top: 0;
    line-height: 75px;
    vertical-align: bottom;
}

我在pull-left和pull-right周围有框的原因是出于视觉目的而处理此问题。一旦我可以正确对齐文本，我将删除边框。谢谢你的帮助！

jsfiddle：https://jsfiddle.net/rtc498uk/

编辑：我的目标是让文字像这样对齐：

Answer 1

.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}

将文本移动到div的底部以与图像对齐

1 个答案: