Syntactic Fructose Syntactic Fructose - 4 months ago 11
HTML Question

Move text to bottom of div to align with image

To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.

For whatever reason, my

vertical-align: bottom;
property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?

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


The reason I have boxes around
pull-left
and
pull-right
is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!

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

EDIT: My goal is to get the text to align like this:

enter image description here

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