technology_dreamer technology_dreamer - 10 months ago 34
HTML Question

Vertical align and height inside float div issue

We have reviewed a tone of questions here in Stackoverflow about vertical align and height 100% issues like:

Fill height of a floating nested div

css div 100% height issue

And more similar links, but none of them has helped us.

JSfiddle code:

HTML code:

<div id="header">
<div id="logo_container">
<a href="main-catalog"><img src="img/logo-finder.png" alt="Logo Example"></a>
</div><!--Logo container-->
<a href="main-catalog" id="aplication_lookup_button" class="button_link">Search by application</a>
<a href="search-product-catalog" id="search_product_button" class="button_link">Search by part number</a>
</div><!-- Main header where logo and buttons are showed it -->

CSS code:

background: #000;

width: 14.0056%;
text-align: center;
float: left;

#logo_container img
max-width: 50%;
height: auto;

text-align: center;
color: white;
text-transform: uppercase;
width: 25%;
height: 4.1em;
float: left;

background: #424242;
border-bottom: 4px solid #2eaeb8

color: #2eaeb8;
font-weight: bold;

Here's a snapshot of how it looks at this moment:

enter image description here

We want that a-href texts be in the middle of the container and we would like to use
instead of use
's that we are using currently.

Answer Source

you could use pseudo-element and inline-block property :

.button_link:before {

This technique can be useful if you want to wrap text in an inline-block element and display more than one line