Image title both alingn. How to make each element aligned vertically?


Tags: html,css,css3

Problem :

I am creating a page to list all the sponsors of a web site, with logo and the name of them. The problem is that I cannot align the titles because the logos having different height. The result is like that:

enter image description here

But I like to have the following result:

enter image description here

The HTML for each sponsor listing is this:

<div class="one_fourth">
    <a href="LINK_TO_SPONSOR">
        <img src="URL_TO_IMAGE" />
    </a>
    <h3>Sponsore Title</h3>
</div>

The CSS applied on my images is the following:

img
{
    display: block !important;
    max-width: 100% !important;
}

Is there a way to achive ther required result with CSS and if so, how ?

DEMO



Solution :

If you insert a div that include your link and image and set the height to your div you can align your text try this:

  <div class="one_fourth">
     <div class="img">
         <a href="LINK_TO_SPONSOR">
            <img src="URL_TO_IMAGE" />
         </a>
     </div>
     <h3>Sponsore Title</h3>
 </div>

And in your css add a class for that div setting the height max of the image

.img{
   height:100px; 
}

DEMO

YOUR DEMO CORRECTED


    CSS Howto..

    How to set jQuery draggable min/max-left and min/max-right

    How to avoid inheriting opacity property in CSS?

    How to apply custom css to split post into multiple page

    How do I use CSS to select for a tag with arbitrary name attribute?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    How to position a div to be visible but not count towards document width

    How to place the block on the top of “second” screen using CSS?

    How do I fix a Wordpress meta box that's blown out by it's content?

    How to do img validation

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    How to create a speech bubble with css only

    How to make a smoother animation with jQuery UI slide effect

    margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to create a pure css slideshow? [closed]

    how to set the css left property of a class on the basis of an ID of a tag

    how to center anchor tag horizontally css

    How can I apply CSS to elements created with javascript in IE?

    How to declare CSS font-face with font-weight and font-style properly?

    How to display last div at top using CSS?

    How to make submit input and text input equally spaced

    How to convert a css only megamenu to jquery based

    How to explain CSS clear property? [duplicate]

    How to get the complete css information if css class is given form the used style sheets files

    How To Use CSS To Style The Output Of JavaScript

    how to change properties of a parent div on hover of child div

    How can I erase a border piece using CSS?

    How can I write the javascript script to modify this css file?

    CSS\HTML - How to add Ionicons to CSS “content” property?

    How to read different CSS classes with the same beginning with jquery?