将文本移到div的底部以与图像对齐
句法果糖
作为序言：我遇到过许多其他解决方案，但没有找到一个可行的解决方案的运气。我目前正在使用此答案将文本与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/
编辑：我的目标是使文本像这样对齐：
Yasin Yaqoobi
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何将图像与div的底部对齐？
- 2
如何将图像与div的底部对齐？
- 3
将文本结尾对齐到div的底部
- 4
将文本居中对齐到div的底部
- 5
将文本基线对齐到div的底部
- 6
在所有屏幕尺寸下，将div对齐到图像底部，而不考虑文本行
- 7
将文本与 div 内两个 div 的底部对齐
- 8
将文本对齐到引导网格中图像的底部内部
- 9
将图像垂直对齐到div标签的底部
- 10
将底部div与不同大小的文本垂直对齐
- 11
Bootstrap 3将文本对齐到Div的底部
- 12
将文本放在右对齐的 div 容器的底部
- 13
CSS对齐div底部的文本
- 14
将标题与div的底部对齐
- 15
在图像左侧对齐底部换行的文本
- 16
带图像和文本的HTML标头-将文本对齐到底部？
- 17
对齐图像中心，响应div的底部
- 18
如何在div的底部中心对齐图像
- 19
将所有 div 内的图像与文本左侧对齐
- 20
用HTML中的图像将文本对齐到一行的底部
- 21
用HTML中的图像将文本对齐到一行的底部
- 22
如何使用引导程序 3 将文本与背景图像的底部对齐
- 23
将文本块对齐到页面底部
- 24
将菜单文本与li的底部对齐
- 25
将文本与引导面板底部对齐
- 26
将容器与文本的顶部和底部对齐
- 27
将图像放在 DIV 的底部
- 28
将图像与文本块对齐
- 29
如何将图像对齐到嵌套div的底部（在引导程序中）？
我来说两句