Question

我想将圆形图像设置到主页的中心，只需一个按钮覆盖它。页面上没有其他内容，只有图像和按钮。您可以说，我们对编码非常新！我们在Dreamweaver上使用CSS和HTML。

Answer 1

将容器div的CSS设置为：

#container {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

div内的图像应该水平和垂直居中。

Answer 2

好的，所以假设你有几个带有img的div元素：

<div class="parent"><div class="img-container"><img src="http://placekitten.com/230/230" alt="kitten"></div></div>

您可以按如下方式设置CSS：

.parent {
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.img-container {
    height: 500px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

有关演示，请参阅http://jsfiddle.net/NL2ZA/。显然，您需要编辑类名称，以便在项目中说出更有意义的内容。

Answer 3

你可以这样做。将image-id更改为该图像的任何ID，将其显示为块，使其成为一定宽度，以％或像素为单位，边距为0自动。

#image-id {
    display: block;
    width: 60%;
    margin: 0 auto;
}

Answer 4

有几种技巧。

CSS背景 - 您不需要这样，但仍然：

html {
width: 100%;
height: 100%;
background: url(logo.png) center center no-repeat;
}

CSS +内联图片：

img { 
position: absolute;
width: 400px; height: 400px;
left: 50%; margin-left: -20px; /* Half the width */
top: 50%; margin-top: -20px; /* Half the height */
}

表：

html, body, #wrap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

#wrap td {
vertical-align: middle;
text-align: center;
}

<html>
<body>
<table id="wrapper">
<tr><td><img src="logo.png"></td></tr>
</table>
</body>
</html>

Answer 5

您可以使用像素或％设置图像的高度和宽度。您还可以使用margin-left / top / right / bottom更改图像位置。你可以在这里找到关于html / css的很多信息：http://www.w3schools.com。祝你好运！

Answer 6

一种非常简单的方法是使用css转换。除了我的例子中的图像之外，不需要额外的HTML：“

FIDDLE （webkit示例）

http://jsfiddle.net/CNs68/

<强> CSS

img {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
}

这个例子的好处在于，无论图像的尺寸是多少，它都将始终居中！不要忘记添加其他前缀（例如moz）。

如何将图像垂直和水平居中而不将其设置为背景？

6 个答案: