www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to vertically align images in floating div (three columns)?

  1. #1
    Join Date
    Jan 2014
    Posts
    25

    How to vertically align images in floating div (three columns)?

    Hello

    CSS noob here and I'm trying to learn CSS, but the simplest of things are literally taken hours. All I'm trying to do at present is recreate this layout using CSS.

    http://imagizer.imageshack.us/v2/800...0/547/4unk.jpg

    Here's as far as I have got...

    http://codepen.io/anon/pen/Hdcwb

    Note the 'Windows Server 2003' logo. I need this vertically aligned, so that it's in the center compared to the Windows XP logo on the right.

    I cannot for the life of me figure this out. While I've found 101 ways to vertically align an image (which by the way which is the 'correct' way?!), none have worked for me in this instance. I assume that the current classes have something to do with that, but either way I am stumped.

    Please save my sanity and help.

    Thank you

  2. #2
    Join Date
    Mar 2011
    Posts
    1,141
    The vertical-align property is for non-replaced inline elements. The alignment is relative to the line-boxes created by the block-level containing element, so in situations like this, you have to set the 'line-height' property of the containing element to control the effect.

    In your pen page, try:
    Code:
    .three-divisions {
    	width:33.33%;
    	float:left;
      line-height:110px;
      text-align:center;
    }
    .three-divisions .center {
      display:inline;
      vertical-align:top;
    }
    The above is a bit unusual because of the original HTML and CSS. Focus on the 'line-height' in the parent, and the 'vertical-align' on the images.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2014
    Posts
    25
    Many thanks rtrethewey. In light of my code being unusual, scraping my code, how should I have coded this please in terms of best practice?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,141
    I'd have done it something like:
    Code:
    <style type="text/css">
    .centerVertAlign {
            margin:0; padding:0;  /* Just in case! */
            line-height:110px;
            text-align:center;
    }
    .margin-top {
    	margin-top:1em;
    }
    .three-divisions {
    	width:33.33%;
    	float:left;
    }
    .centerVertAlign img {
      vertical-align:top;
    }
    </style>
    <div class="margin-top">
    <p class="centerVertAlign"><img src="mac-os-x-logo.jpg"></p>
    </div>
    <div class="three-divisions margin-top">
    <p class="centerVertAlign"><img src="windows-8-logo.jpg"></p>
    </div>
    <div class="three-divisions margin-top">
    <p class="centerVertAlign"><img src="windows-vista-logo.jpg"></p>
    </div>
    <div class="three-divisions margin-top">
    <p class="centerVertAlign"><img src="windows-vista-logo.jpg"></p>
    </div>
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jan 2014
    Posts
    25
    Thanks rtrethewey. Seems so over complicated, plus while I can see this working in codepen (but setting vertical-align:middle), it doesn't work in dreamweaver, as in the Windows server 2003 logo still will not vertical align middle.

    I think I may just combine logos in to one and be done with it.

    Thanks again for your help.

  6. #6
    Join Date
    Jan 2014
    Posts
    25
    I should add, I mean over complicated for the seemingly simple task that this is (not your code). With HTML, I could bung this in a table within a minute and have it looking exactly as needed, although I now know that is naughty, but sometimes essential for those who are used to building with wysiwyg's. I've literally spend a whole day trying to achieve the same in CSS.

    BTW sorry for double post, but I don't have edit privileges yet.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles