Fatal编程技术网
  • html/
  • Html 将文本移动到div底部以与图像对齐

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

html css

Html 将文本移动到div底部以与图像对齐,html,css,Html,Css,前言：我遇到了许多其他的解决方案，但没有找到一个有效的。我目前正在使用answer将我的文本与div的底部对齐，但运气不好 无论出于何种原因，我的垂直对齐：底部

前言：我遇到了许多其他的解决方案，但没有找到一个有效的。我目前正在使用answer将我的文本与div的底部对齐，但运气不好

无论出于何种原因，我的
垂直对齐：底部
index.html



我之所以在
向左拉
和
向右拉
周围有框，是为了在处理此问题时便于查看。一旦我能使文本正确对齐，我将删除边框。谢谢你的帮助

jsfiddle：

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


您能添加一个屏幕截图来显示它应该是什么样子吗？只是为了再次检查一下？你想在带边框的容器中对齐文本还是将实际的容器移动到页面底部？请参阅我的编辑，希望能消除混淆当添加到小提琴上的css时，这似乎没有改变任何内容忘记添加
vertical align:bottom。这应该可以解决它。

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



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-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}