FF Extension - Vertically Aligning Images Inside of Div's (Using max-height/max-width)_问答_开发者

FF Extension - Vertically Aligning Images Inside of Div's (Using max-height/max-width)

开发者 https://www.devze.com 2023-01-15 20:28 出处：网络

I know this question has been done to death, so I\'m really sorry that I have to ask it again but despite all of the information out there, I have found nothing that works for my specific circumstance

I know this question has been done to death, so I'm really sorry that I have to ask it again but despite all of the information out there, I have found nothing that works for my specific circumstance.

I currently have a sidebar in FF for an extension. Within this sidebar, I have(for simplicities sake) 3 things.

<div id="resultsDiv">
     <div class="imgContainer">
          <img class="imgThumb" src="someCorrectURL"></img>
     </div>
</div>

Now if this were it, there would be a couple of working solutions for vertically centering "imgThumb" within "imgContainer". However, my dimensions are max-height and max-width, as opposed to the regular height/width. At this point, I dont know what to do. I have tried probably 5 different methods that people back as functional for regular height/width and all have failed.

Some more information, the reason I included "resultsDiv" is because in reality there will be more than one image within it, whi开发者_运维知识库ch may also contribute to why the solutions aren't working. Below are how my CSS classes/ids are currently defined, and I shouldn't have any property currently in there that has no formatting purpose.

.imgThumb
{
    max-width: 95px;
    max-height: 95px;   
    padding: 5px;
    cursor: pointer;
}

.imgContainer
{
  width: 105px;
  height: 105px; 

  float: left;
  text-align: center;  

  margin: 2px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background: #131313;
}

.resultsContainer
{
    overflow: auto;

    min-height: 750px;
}

Just to show what I'm talking about, I took a screen shot, this is using the above CSS only, http://i167.photobucket.com/albums/u130/MercilessShadow/ffext-cqsSS.png. As you can see the images that are wider than tall are floating near the top of the containers, I am trying to get them to the middle. Images 2 and 3 are examples of this.

If anyone can point me in the right direction for a functional solution I would be unbelievably grateful.

I'm not really sure of what it is that you're looking for, I think you're trying to vertically align 1 or more images within a div? (maybe? I'm not sure where the max height/width becomes a problem.)

If so... this should work for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <style>
            .resultsContainer {
                position:relative;
                border:solid 1px #333333;
                text-align:center;
            }
            .resultsContainer .imgContainer {
                position:absolute;
            }
            .imgThumb {
                width: 95px;
                height: 95px;   
                padding: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="resultsContainer">
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic1"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic2"></img></div>
            <div class=".imgContainer"><img class="imgThumb" src="someCorrectURL" alt="pic3"></img></div>
        </div>
    </body>
</html>

Please correct anything I may have misunderstood, and I'll be sure to check back to make any corrections.

Cheers.

I ended up going with a method that someone else recommended to me. You just set the image as the background image of the div, and manipulate it that way. So for my specific situation it would be something like:

//CSS
.imgContainer
{
  width: 105px;
  height: 105px; 

  cursor: pointer;

  float: left;
  text-align: center;   

  margin: 5px;  
  border-bottom: 1px solid grey;
  border-right: 1px solid grey;
  background-color: #131313;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: auto;
  background-size: auto;
}
//Javascript
var imgSrc = //Generate URL; 
var imgBox = sidebarDoc.createElementNS(XHTML_NS, "div");

imgBox.id = //An ID;
imgBox.setAttribute("class", "imgContainer");
imgBox.setAttribute("style", "background-image: url('" + imgSrc + "')");
//imgBox.setAttribute("title", responseInJSON.SearchResultImages[i].Title);

resultsBox.appendChild(imgBox);

There is a little bit of extra in there, but I'm sure anyone that wants to use this as a reference will be able to determine what they need and what they don't.

Thanks for the help!