Html 如何在不将图像设置为背景的情况下将其垂直和水平居中？_Html_Css_Image

Html 如何在不将图像设置为背景的情况下将其垂直和水平居中？

html css image

Html 如何在不将图像设置为背景的情况下将其垂直和水平居中？,html,css,image,Html,Css,Image,我想在主页的中央设置一个圆形图像，上面有一个按钮。页面上没有其他内容，只有一个图像和一个按钮。正如您可能知道的，我们对编码非常陌生！我们正在Dreamweaver上使用CSS和HTML。您可以这样做。将图像id更改为该图像的任何id，将其显示为块，使其具有一定的宽度（以%或像素为单位），并自动设置边距0 #image-id { display: block; width: 60%; margin: 0 auto; } 将容器div的CSS设置为： #containe

我想在主页的中央设置一个圆形图像，上面有一个按钮。页面上没有其他内容，只有一个图像和一个按钮。正如您可能知道的，我们对编码非常陌生！

我们正在Dreamweaver上使用CSS和HTML。

您可以这样做。将图像id更改为该图像的任何id，将其显示为块，使其具有一定的宽度（以%或像素为单位），并自动设置边距0

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

将容器div的CSS设置为：

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

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

有两种技术

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>

html，body，#wrap{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
边界：0；
}
#包裹运输{
垂直对齐：中间对齐；
文本对齐：居中；
}

您可以使用像素或百分比设置图像的高度和宽度。您还可以使用左/上/右/下边距更改图像位置。你可以在这里找到很多关于html/css的信息：。祝你好运

好的，假设有两个div元素，里面有一个img：

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

请参见演示。显然，您需要编辑类名，以便在项目中说些更有意义的话。

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

小提琴（webkit示例）

CSS

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

这个例子的好处是，不管图像的尺寸是多少，它总是居中！不要忘记添加其他前缀（例如moz）.

关于它的答案太多了，所以只需搜索和/问题/114543/如何居中-一个分区-一个分区-水平高度我们目前没有任何答案，我们只是不知道如何开始居中图像。这实际上是一个空白页，只有一个图像！谢谢，我们现在就尝试！图像的正确选择器不是

img

？我当然是img。用更多的技巧编辑。谢谢！这真的很有帮助！我也会试试这个，谢谢。

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