在 ASP.NET 中的 DIV 内水平和垂直居中图像
Posted
技术标签:
【中文标题】在 ASP.NET 中的 DIV 内水平和垂直居中图像【英文标题】：centering an image horizontall and vertically inside a DIV in ASP.NET 【发布时间】：2012-11-26 13:09:09 【问题描述】：我想在 div 中间显示一个 ASP.NET 图像（水平和垂直），我应该如何排列我的 div 和图像（图像应该是 runat=server），我还应该设置 max-width 和我的图像的最大高度样式，DIV 充当占位符，我的图像应该在 DIV 内，并且它应该在水平和垂直方向上完全居中，你能显示我正确的 html 和 CSS 吗？有样品吗？
【问题讨论】：
【参考方案1】：用途：
CSS
.placeholdermin-width:200px; min-height:200px;
.placeholder img
margin: 0px auto; /*centers element horizontally*/
vertical-align:middle; /*centers element vertically */
你的 html 应该是这样的：
<div class="container">
<div class="placeholder">
<!-- load image here -->
</div>
</div>
【讨论】：
我应该在哪里使用这些样式？这些应该为我的 ASP.NET 图像控件设置吗？我的 div 呢？它不需要任何CSS？ 请发布您的代码。此方法不适用于浮动元素。在没有看到任何代码的情况下，很难确定你正在使用什么，我能做的最好的就是猜测。【参考方案2】：我非常努力地寻找解决方案，希望它 100% 有帮助:-)
<html>
<style>
.placeholder
width: 250px;
min-width: 250px;
height: 250px;
min-height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
top: 40%;
margin: -100px 0 0 -125px;
</style>
<IMG class="placeholder" src="http://www.swoo.co.uk/content/images/icons/***.png">
</html>
替换任何你想要的 img 来代替等于“src”的 URL。 请注意，它在浏览器中放大和缩小时也可以使用，它完全位于页面的中间，您可以找到最好的代码:)
【讨论】：
以上是关于在 ASP.NET 中的 DIV 内水平和垂直居中图像的主要内容，如果未能解决你的问题，请参考以下文章