Question

我刚刚问question关于对齐按钮的问题，感谢那里的回复，我让它正常工作，展出here。

我没有在这个问题上移动目标帖子，而是决定向另一个人询问另一个相关问题：如何将控件与通过CSS居中的控件对齐。

以下是更新的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>

和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;
}

我想要的是signatureFooter和signatureTitle的内容与signatureImage中包含的图片水平对齐。使用上面链接的小提琴中的数据，我希望“VIEW SIGNATURE”和“SAMPLE”图标与“示例”图像的左边界对齐，并且“关闭”按钮的右边框与“示例”图像的右边框。问题（对我来说）是，我使用display: block; margin-left: auto; margin-right: auto;使该图像居中，所以我不知道如何使用CSS来排列这些图像。这是以错误的方式将图像置于中心位置吗？另一种策略是否会使这些内容变得更容易？

Answer 1

您可以对容器使用相同的属性：

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

要获取页脚的位置，请使用left：

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

检查Demo Fiddle

水平对齐Div，取决于居中的Img

1 个答案: