Html 如何将图像垂直和水平放置在中心/中间_Html_Css

Html 如何将图像垂直和水平放置在中心/中间

html css

Html 如何将图像垂直和水平放置在中心/中间,html,css,Html,Css,如何使图像从这个框的中间开始？（垂直和水平居中）我希望我能理解你想要实现的目标 <div id="photo_leftPanel" style="float: left; width: 604px; position: relative;"> <img src="bla.jpg"> </div> 有几种方法可以做到这一点，如果它需要在所有浏览器（IE7+和其他浏览器）中工作，您需要做不同的事情，使它在某些情况下工作使用绝对位置。这仅在您知道图像的大小时有效

如何使图像从这个框的中间开始？（垂直和水平居中）

我希望我能理解你想要实现的目标

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

有几种方法可以做到这一点，如果它需要在所有浏览器（IE7+和其他浏览器）中工作，您需要做不同的事情，使它在某些情况下工作

使用绝对位置。这仅在您知道图像的大小时有效。在这里，您将其设置为

位置：绝对；左：50%；最高：50%；边距：-0-

请参见此处的示例：

使用

边距：0自动；文本对齐：居中和行高/字体大小。
这有点棘手，因为对于像图像这样的内联块元素，行距在IE中不起作用。这就是字体大小的作用。
基本上，可以将图像容器的线条高度设置为与容器的高度相同。这将垂直对齐内联元素，但在IE中，您需要设置字体大小以使其正常工作
请参见此处的示例：


在支持display:flex
的现代浏览器中，只需将container div设置为display:flex；对齐项目：居中；证明内容：中心
请参见此处的示例：

“float:left；position:relative
”可能无法按预期工作。浮动元素被认为是绝对的
要使图像垂直居中，div上需要一个高度，其父对象上需要一个高度。（垂直居中有点痛苦）。如果这些是您唯一的元素，我下面的示例将起作用，但请注意容器上的height:100%
可能会影响布局的其余部分
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>


html，正文{
身高：100%；
}
#照片左面板{
高度：500px；/*猜测*/
宽度：604px；
浮动：左；
}
#照片\左面板img{
保证金：自动；
垂直对齐：中间对齐；
}
将图像放置在
中，文本对齐：居中而不指定框的大小
<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>

适合现代浏览器的解决方案是flexbox。flex容器可以配置为水平和垂直对齐其项目
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>


HTML：
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

@Caspar Kleijne你说得对，我真的不知道如何在CSS中居中放置图像。我知道文本对齐：居中，但这适用于图像吗？感谢麦金：汽车；或保证金：0自动；如果你只想影响水平对齐。代码不错。在你的代码中“字体大小”之前的星号是否必要？如果需要，这涵盖了什么版本的IE？我使用了第一条语句，这条语句非常有效，我只是将绝对位置替换为相对位置，以使我所有的图像都集中在它们自己的分区中。谢谢！如果你不需要内联图像，你可以考虑将它添加到div的背景背景中：背景和背景重复：没有重复的相关帖子。
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

<div id="photo_leftPanel">
   <img src="bla.jpg">
</div>

div.photo_leftPanel {
   position: relative;
}

div.photo_leftPanel > img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}