CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Julian Lettner
Julian Lettner

Reputation: 3669

Align form text at baseline of image

I want to do something like the following, but I can't figure out how to align the logout link just above the navigation bar, without specifying an explicit padding or line-height which breaks the layout if the size of the image changes.

enter image description here

<img src="logo.png" />
<a> logout link </a>
<div> navigation bar </div>

I am using bootstrap, but I am also fine with a non-bootstrap solution.

Upvotes: 1

Views: 206

Answers (2)

Flam
Flam

Reputation: 106

As Thanix says, you can combine relative and absolute positioning to achieve this. Make a containing div for the image and the logout link so that the logout link can be set at the bottom of this.

<div class="header">
    <img class="logo_image" src="logo.png" width="40" height="40" /> 
    <a class="logout_link"> logout link </a>
    <div class="clear"></div>
</div>
<div class="nav_bar">navigation bar</div>

Then make the containing div position:relative and the logo position:absolute. The trick here is that "an absolute position element is positioned relative to the first parent element that has a position other than static." (www.w3schools.com). This means you can use bottom:0px and right:0px to position it at the bottom right of the containing div.

.header {position:relative;}
.logout_link {    
    position:absolute;
    bottom:0px;
    right:0px;
}
.logo_image {
    float:left;
}
.clear {clear:both;}

The class="clear" div at the end of the containing div is to make sure the containing div fills the space of its child components.

Upvotes: 2

Nerius
Nerius

Reputation: 980

  1. Place the logout <a> inside the navigation bar <div>.
  2. Set navigation bar's position to relative.
  3. Set logout's position to absolute, right to 0 and top to -1em;

Upvotes: 1

Related Questions