Center a dynamic width div inside a fixed width div_问答_开发者

Center a dynamic width div inside a fixed width div

开发者 https://www.devze.com 2023-03-22 18:59 出处：网络

I have quite a bit of experience with css and even this problem has stumped me. I am theme-ing the NextGen gallery plugin for Wordpress, which means I don\'t really have control over the HTML, and I

I have quite a bit of experience with css and even this problem has stumped me.

I am theme-ing the NextGen gallery plugin for Wordpress, which means I don't really have control over the HTML, and I have a problem trying to line up the images.

In NextGen the maximum size of images is 200px x 200px. The images are thumbnails of larger images, each with its own constraints in size and dimension but all under 200px x 200px

The main aim:

The class image is fixed width but its width changes depending on the image that is within it. The class imageBox surrounds images and has its width fixed to the maximum width of images (200px wide, 200px high). For the images that are not 200px wide I want them to line up in the center of the imageBox.

The basic HTML generated by NextGen Gallery:

<div class="imageBox">
   <div class="image">
      <img />
   </div>
</div>

My CSS so far:

.imageBox{
    width: 218px;
    height: 218px;
    float: left;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.image{
    margin-right: 5px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    display: inline-block;
}

I have used absolute positi开发者_如何学Gooning to ensure the images are all lined up along their bottom edge, thus the bottom:0px.

Any help would be great.

EDIT Messed up the css, had the classes the wrong way round.

Try this:

.image{
    width: 218px;
    height: 218px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
 }

This simplified sample, which is working if you have the specified image, works out pretty well:

<!doctype html>
<html>
<head>
    <title>Centered images</title>
    <style type="text/css">
        .imageBox
        {
            float: left;
            background: cyan;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        img
        {
            vertical-align: middle;
            background: magenta;
            position: relative;
            bottom: 2px;
        }
    </style>
</head>
<body>
    <div class="imageBox">
        <img src="img.png" width="200px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="190px" alt="Image." />
    </div>
    <div class="imageBox">
        <img src="img.png" width="180px" alt="Image." />
    </div>
</body></html>

There is a minor vertical 2px difference in Internet Explorer 7 and Opera.

The trick here is to use the vertical-align property. It is a bit special and it is used in combination with the line-height property on the parent element.

More information:

Understanding vertical-align, or "How (Not) To Vertically Center Content"

I have never worked with wordpress, so I'm not sure what the restrictions are; but can you override their css with an important tag?

.image{
    position: relative !important;
}

The solution is to give a fixed 200px width to the image class and set it with position absolute and bottom 0px. This causes it to snap to the bottom of the imageBox class while taking the full width of its container.

Since the image div is now at the bottom and the full width, all thats needed is to center the image so I applied margin 0px auto to the image > img class, centering the image and solving my problem.

This can be seen here.