Align Divs Horizontally Based off Centered Img

Question

I just asked a question about aligning a button and thanks to the responses there, I have it working, as exhibited here.

Instead of moving the goal posts on that question, I've decided to ask another one regarding another, related issue: how to align controls with one that is centered via CSS.

Here's the updated example HTML:

<div id="signaturePopup">
    <label id="signatureTitle">View Signature</label>
    <div id="signatureImage">
        <!--Contains img-->
    </div>
    <div id="signatureFooter">
        <div id="signatureStatus">
            <!-- Contains another img -->
        </div>
        <label id="signatureUserDetails">Added via JS</label>
        <input id="closeSignature" type="button" value="Close" />
    </div>
</div>

And CSS:

#signatureTitle {
    text-transform: uppercase;
    font-size: 16px;
}
#signatureFooter {
    bottom: 0;
    position: absolute;
    width:100%;
}
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input {
    display: inline;
}
#signatureFooter > input {
  float:right; 
}
#signatureImage > img {
    height: 90%;
    width: 90%;
    border: grey 1px solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

What I want is for the contents of signatureFooter and signatureTitle to be horizontally aligned with the image contained in signatureImage. Using the data in my fiddle linked above, I want "VIEW SIGNATURE" and the "SAMPLE" icon to be lined up with the left border of the "example" image as well as having the "Close" button's right border lined up with the right border of the "example" image. The problem (for me), is that I am centering that image using display: block; margin-left: auto; margin-right: auto; so I don't know how to use CSS to line these up. Is this the wrong way to go about centering that image? Would another strategy make lining these up easier?

score 1 · Accepted Answer · answered Feb 11 '14 at 18:10

1

You can use the same properties for the container:

#signatureTitle {
  display:block;
  width:90%;
  margin:auto;
}

And to get the position of the footer use left:

#signatureFooter {
  width:90%;
  left:5%;
}

Check the Demo Fiddle

answered Feb 11 '14 at 18:10

DaniP

37,813
8
65
74

Align Divs Horizontally Based off Centered Img

1 Answers1