我正在尝试为游戏创建一个典型的主菜单屏幕。它有一个徽标,位于顶部居中,以及一些菜单按钮。它将始终以横向布局显示,并且需要支持不同的分辨率。
到目前为止,这是我得到的:http://jsfiddle.net/L3mNT/
我的问题是:
1)是否可以仅使用DIV对徽标进行居中和缩放?还是可以“重用” img标签和中心标签? DIV的(缺点)有哪些优点?当我尝试以像素为单位添加高度时,DIV徽标确实会缩放
.logo{
..
height:120px;
}
但必须在resize事件中通过javascript更新。我认为仅使用CSS应该可以实现,还是我错了..?
2)如何将菜单div垂直居中放置,这些按钮必须位于屏幕中间,并且不能掉落在屏幕底部。以下无效
.menu{
width:50%;
height:50%;
margin:auto auto;
}
最佳答案
img
标签可以。 center
标记自1867年左右就已过时。但是,您可以轻松地在徽标的父元素上使用text-align: center
作为样式。
因此,使用这样的一段HTML:
<div class="logo"><img src="..."></div>
和一段这样的CSS:
.logo {
text-align: center;
}
.logo img {
width: 50%;
}
您应该有一个中心徽标,大约为页面宽度的一半。
使用
img
标签没有什么可耻的,实际上,如果您想扩展,那么使用它非常方便。图像将根据其宽度自动缩放其高度。仅使用背景图像没有简单的方法来获得相同的效果。或者,您可以使徽标成为背景。但是然后您必须指定容器的高度,因为它根本没有任何内容,否则会崩溃:
.logo {
text-align: center;
background-color: red;
background-image: url('http://jsfiddle.net/img/logo.png');
background-size: contain;
background-position: 50% 0;
background-repeat: no-repeat;
height: 100px;
}
http://jsfiddle.net/cwj2b/
关于html - CSS/HTML,如何缩放和居中徽标图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22520185/