I have the following markup code in my page:
我的页面中有以下标记代码：
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
并且它没有像我预期的那样出现，它看起来像那样：
But I wanted to get this result:
但我想得到这个结果：
How can I center this image horizontally and vertically?
如何水平和垂直居中显示此图像？
6 个解决方案
#1
11
Here is a tutorial for how to center the images vertically and horizontally in a div.
这是一个如何在div中垂直和水平居中图像的教程。
Here is what you are looking for:
这是你在找什么：
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>#2
5
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
对于垂直对齐，我会包含一些CSS来从顶部50％定位它，然后将其向上移动图像的像素高度的一半。
Horizontal, I would use a margin, as suggested.
水平，我会按照建议使用保证金。
So if your image was 100x100px you'd end up with.
因此，如果你的图像是100x100px，你最终会得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
#3
0
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script: $(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/ repositionCenteredImage(); });
您需要解决两个方面。第一方面是水平对齐。这可以通过边距轻松实现：自动应用于图像本身周围的div元素。 DIV需要将宽度和高度设置为图像大小（否则这将无效）。要实现垂直中心对齐，您需要在HTML中添加一些javascript。这是因为在页面启动时不知道HTML高度大小，并且可能稍后更改。最好的解决方案是使用jQuery并编写以下脚本：$（window）.ready（function（）{/ * listen to window ready event - 在页面加载后触发* / repositionCenteredImage（）;}）;
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
显示图像的HTML页面如下所示：
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
附加到元素的CSS如下所示：
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
您可以从我们公司主页的以下网址下载整个解决方案：
http://brumenlab.com
#4
0
This solution is for all size images In this the ration of the image is also maintain.
该解决方案适用于所有尺寸的图像。在此，图像的比例也得以保持。
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div> You can set size of
你可以设置大小
.client_logo
.client_logo
accourding to your requirement
符合您的要求
#5
-1
Try something like this:
尝试这样的事情：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
#6
-1
using margin-top
使用margin-top
example css
示例css
#id_immagine{
margin:0 auto;
}
#1
11
Here is a tutorial for how to center the images vertically and horizontally in a div.
这是一个如何在div中垂直和水平居中图像的教程。
Here is what you are looking for:
这是你在找什么：
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>#2
5
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
对于垂直对齐，我会包含一些CSS来从顶部50％定位它，然后将其向上移动图像的像素高度的一半。
Horizontal, I would use a margin, as suggested.
水平，我会按照建议使用保证金。
So if your image was 100x100px you'd end up with.
因此，如果你的图像是100x100px，你最终会得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
#3
0
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script: $(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/ repositionCenteredImage(); });
您需要解决两个方面。第一方面是水平对齐。这可以通过边距轻松实现：自动应用于图像本身周围的div元素。 DIV需要将宽度和高度设置为图像大小（否则这将无效）。要实现垂直中心对齐，您需要在HTML中添加一些javascript。这是因为在页面启动时不知道HTML高度大小，并且可能稍后更改。最好的解决方案是使用jQuery并编写以下脚本：$（window）.ready（function（）{/ * listen to window ready event - 在页面加载后触发* / repositionCenteredImage（）;}）;
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
显示图像的HTML页面如下所示：
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
附加到元素的CSS如下所示：
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
您可以从我们公司主页的以下网址下载整个解决方案：
http://brumenlab.com
#4
0
This solution is for all size images In this the ration of the image is also maintain.
该解决方案适用于所有尺寸的图像。在此，图像的比例也得以保持。
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div> You can set size of
你可以设置大小
.client_logo
.client_logo
accourding to your requirement
符合您的要求
#5
-1
Try something like this:
尝试这样的事情：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
#6
-1
using margin-top
使用margin-top
example css
示例css
#id_immagine{
margin:0 auto;
}