比较来自世界各地的卖家的域名和 IT 服务价格

垂直和水平居中内部的图像 Div, 如果您不知道图像的大小?

如果我有一个固定大小的容器 div 和未知尺寸的图像,如何将其级水平和垂直居中?

使用清洁 css

使用 JQuery, 如果一个 css 不能这样做

https://coderoad.ru/388180/
用于图像

固定宽度

, 但不是可变图像。

像这种结构的东西 /我是说
http://net.tutsplus.com/
, 但是,左侧的图像不会总是具有相同的大小:


<ul id="gallery">
<li id="galleryItem1">
<div class="imageContainer">
<img src="gallery/image1"/>
</div>
<p>Some text to the right...</p>
<!-- more stuff -->
</li>
<li id="galleryItem2">
<!-- ... -->
</li></ul>


谢谢您的帮助!
已邀请:

石油百科

赞同来自:

如果图像设置为背景图像和居中,则不是一个选项, jQuery 适应
https://coderoad.ru/388180/
, 会去:


$/".fixed-div img.variable"/.each/function//{
//get height and width /unitless/ and divide by 2
var hWide = /$/this/.width////2; //half the image's width
var hTall = /$/this/.height////2; //half the image's height, etc.

// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';

$/this/.addClass/"js-fix"/.css/{
"margin-left" : hWide,
"margin-top" : hTall
}/;
}/;


假设这个类 CSS 确定卫星


.variable.js-fix {
position:absolute;
top:50%;
left:50%;
}


固定宽度 div, 宣布高度和
position:relative

.

[重要的 JS 编辑:切换 '.style//" 到 ".css//']

八刀丁二

赞同来自:

为此,您可以使用
background-position

.


#your_div {
background-position: center center;
background-image: url/'your_image.png'/;
}

小明明

赞同来自:

CrossBoxrian解决方案


<style>
.border {border: 1px solid black;}
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
<div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
<div class="border" style="width: 400px; #position: relative; #top: -50%">
<img alt="" src="smurf.jpg"/>
</div>
</div>


http://www.jakpsatweb.cz/css/c ... .html
</div>
<div class="answer_text">
检查我的决定:
http://codepen.io/petethepig/pen/dvFsA
它是纯粹的 CSS, 没有任何代码 JS. 它可以处理任何大小和任何方向的图像。

再加一 div 在代码中 HTML :


<div class="imageContainer">
<img src="gallery/image1"/>
</div>


CSS 代码:


.imageContainer {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.imageContainer:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 150px;
}


更新:

我摆脱了这个元素
<div class="trick"></div>

赞成选择器
:before

CSS
</div>
<div class="answer_text">
如果您不知道图像的大小,但在容器大小旁边下载的照片 /可能的大或较小的图像/, 这篇文章可能很有用。 适合我的东西 - 这是以下代码:


<a class="linkPic" href="#">
<img alt="" src="images/img1.jpg"/>
</a>
<a class="linkPic" href="#">
<img alt="" src="images/img2.jpg"/>
</a>
<a class="linkPic" href="#">
<img alt="" src="images/img3.jpg"/>
</a>


在文件中 .css 您有以下规则:


a.linkPic{
position:relative;
display: block;
width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
position:absolute;
}


您可能会注意到您内部的图像标记 a.linkPic, 因此,您必须先将其设置为 "position:relative" 对于绝对元素的内容 "img". 诱使毫无问题的图像 - 这是一个小代码 jQuery. 留意评论以了解正在发生的事情

/在此页面上从Vladimir Maryasov的帖子中取出了一些线。

/ :


$/"a.linkPic img"/.each/function// {
// Get container size
var wrapW = $/"a.linkPic"/.width//;
var wrapH = $/"a.linkPic"/.height//;

// Get image sizes
var imgW = $/this/.width//;
var imgH = $/this/.height//;

// Compare if image is bigger than container
// If image is bigger, we have to adjust positions
// and if dont, we have to center it inside the container
if /imgW &gt; wrapW &amp;&amp; imgH &gt; wrapH/
{
// Centrar por medio de cálculos
var moveX = /imgW - wrapW//2;
var moveY = /imgH - wrapH//2;

// attach negative and pixel for CSS rule
var hWide = '-' + moveX + 'px';
var hTall = '-' + moveY + 'px';

$/this/.addClass/"imgCenterInDiv"/.css/{
"margin-left" : hWide,
"margin-top" : hTall
}/;
} else {
$/this/.addClass/"imgCenterInDiv"/.css/{
"left" : 0,
"right" : 0,
"top" : 0,
"bottom" : 0,
"margin" : "auto",
}/;
}//if
}/;


之后,所有图片内容内容 a.linkPic 将是完美的中心。 我希望这篇文章对某人有用!
</div>
<div class="answer_text">
使用 display: table-cell trick for div

正确的工作: Firefox, Safari, Opera, Chrome, IE8

CSS 例子:


div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
display: inline;
}


HTML 例子:


<div>
<span></span>
<img alt="" src=""/>
</div>


http://www.screencast.com/user ... ccde8
</div>
<div class="answer_text">
这是一个选择 PHP.

这是很多代码,但它就像一个咒语一样。 在阅读本主题的几个帖子后,我提出了这个。 它在十五和div的固定宽度上定位各种尺寸的图像

你 CSS 必须包含它:


.friend_photo_cropped{
overflow: hidden;
height: 75px;
width: 75px;
position:relative;
}
.friend_photo_cropped img{
position:relative;
}


您的代码应该是:


<?php
list/$width, $height/ = getimagesize/$yourImage/;
if /$width>=$height/
{
$h = '75';
$w = round//75/$height/*$width/;
}
else
{
$w = '75';
$h = round//75/$width/*$height/;
}
$top = -round//$h-75//2/;
$left = -round//$w-75//2/;
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
echo '<img height="'.$h.'" src="'.$yourImage.'" style="top:'.$top.'px;left:'.$left.'px;" width="'.$w.'"/>';
echo '</div>';
echo '</td>';
?&gt;


</div>
<div class="answer_text">
您还可以对齐这条路径。 至少,所以我做到了,它为我工作了。 也许这不是最好的方式。 我在固定大小的部门内有一堆不同尺寸的标志。

首先获得图像大小。 然后,基于你的高度 div, 你可以找到应该是顶级的东西。 它将是垂直居中的。 只需更改值 $IMG_URL 和 $DIVHEIGHT.


list/$width, $height, $type, $attr/ = getimagesize/$IMG_URL/;
$margin-top = number_format//$DIVHEIGHT - $height/ / 2, 0/;


例如。


<div .$margin-top."px\"="" style="margin-top:"><img src=""> </img></div>


</div>
<div class="answer_text">
使用 height:100% 对于标签 html, 标签 body, 集装箱和空占位符元素加 display:inline-block; 和 vertical-align: middle 对于不同浏览器中具有无限高度的内容垂直中心的内容和聚合。 元素填充物设置高度 100% 支持行块,所以 vertical-align: middle 它具有所需的效果。 使用固定宽度容器进行图像包装。

使用 display:inline 为了 content div 和 text-align center 为了 container div, 在不同的浏览器中执行具有无限宽度的内容的水平居中。

组合这两种方法创建居中图像库:


<!DOCTYPE html>

<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}

img { margin-left: 20px; margin-top: 10px; }

.container { text-align:center; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.fixed { width: 900px; }

.content { display:inline; }

@media,
{
.wrapper { display:inline; }
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<div class="fixed">
<img src="[url=http://microsoft.com/favicon.ico"/>]http://microsoft.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://microsoft.com/favicon.ico"/>]http://microsoft.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
</div>
</div>
</div>
<span class="placeholder"></span>
</div>
</body>
</html>


</div>
<div class="answer_text">
我用了


.on/'load', function // {


反而


.each/function//{


使用

它有助于在尚未加载图像时消除空高度和宽度的问题。


<style type="text/css">
.fixed-div {
position: relative;
}

.variable {
width: 100%;
height: auto;
}

.variable.js-fix {
position:absolute;
top:50%;
left:50%;
}
</style>
<script type="text/javascript">
jQuery/document/.ready/function//{
$/".fixed-div img.variable"/.on/'load', function // {
//get height and width /unitless/ and divide by 2
var hWide = /$/this/.width////2; //half the image's width
var hTall = /$/this/.height////2; //half the image's height, etc.
console.log/"width", $/this/.width///;
console.log/"height", $/this/.height///;

// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';

$/this/.addClass/"js-fix"/.css/{
"margin-left" : hWide,
"margin-top" : hTall
}/;
}/;
}/;
</script>
<div class="fixed-div">
<img class="variable" src="">
</img></div>


</div>
<div class="answer_text">
居中图像水平和垂直

DEMO

:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/
/


.section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate/-50%, -50%/
}


</div>
<div class="answer_text">
从 CSS3 flexbox 您将不再需要Khaki迎来图像。 目前,所有现代浏览器都支持。 查看

http://caniuse.com/#search=flexbox


.container {
display: flex; /* Flexible layout container */
justify-content: center; /* Horizontal center alignment */
align-items: center; /* Vertical center alignment */
background: lightblue;
/* Fixed size container */
height: 300px;
width: 300px;
}



<div class="container">
<img src="[url=http://placehold.it/150x150"/>]http://placehold.it/150x150"/>[/url]
</div>


</div>

裸奔

赞同来自:

检查我的决定:
http://codepen.io/petethepig/pen/dvFsA
它是纯粹的 CSS, 没有任何代码 JS. 它可以处理任何大小和任何方向的图像。

再加一 div 在代码中 HTML :


<div class="imageContainer">
<img src="gallery/image1"/>
</div>


CSS 代码:


.imageContainer {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.imageContainer:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 150px;
}


更新:

我摆脱了这个元素
<div class="trick"></div>

赞成选择器
:before

CSS

詹大官人

赞同来自:

如果您不知道图像的大小,但在容器大小旁边下载的照片 /可能的大或较小的图像/, 这篇文章可能很有用。 适合我的东西 - 这是以下代码:


<a class="linkPic" href="#">
<img alt="" src="images/img1.jpg"/>
</a>
<a class="linkPic" href="#">
<img alt="" src="images/img2.jpg"/>
</a>
<a class="linkPic" href="#">
<img alt="" src="images/img3.jpg"/>
</a>


在文件中 .css 您有以下规则:


a.linkPic{
position:relative;
display: block;
width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
position:absolute;
}


您可能会注意到您内部的图像标记 a.linkPic, 因此,您必须先将其设置为 "position:relative" 对于绝对元素的内容 "img". 诱使毫无问题的图像 - 这是一个小代码 jQuery. 留意评论以了解正在发生的事情

/在此页面上从Vladimir Maryasov的帖子中取出了一些线。

/ :


$/"a.linkPic img"/.each/function// {
// Get container size
var wrapW = $/"a.linkPic"/.width//;
var wrapH = $/"a.linkPic"/.height//;

// Get image sizes
var imgW = $/this/.width//;
var imgH = $/this/.height//;

// Compare if image is bigger than container
// If image is bigger, we have to adjust positions
// and if dont, we have to center it inside the container
if /imgW > wrapW && imgH > wrapH/
{
// Centrar por medio de cálculos
var moveX = /imgW - wrapW//2;
var moveY = /imgH - wrapH//2;

// attach negative and pixel for CSS rule
var hWide = '-' + moveX + 'px';
var hTall = '-' + moveY + 'px';

$/this/.addClass/"imgCenterInDiv"/.css/{
"margin-left" : hWide,
"margin-top" : hTall
}/;
} else {
$/this/.addClass/"imgCenterInDiv"/.css/{
"left" : 0,
"right" : 0,
"top" : 0,
"bottom" : 0,
"margin" : "auto",
}/;
}//if
}/;


之后,所有图片内容内容 a.linkPic 将是完美的中心。 我希望这篇文章对某人有用!

小明明

赞同来自:

使用 display: table-cell trick for div

正确的工作: Firefox, Safari, Opera, Chrome, IE8

CSS 例子:


div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
display: inline;
}


HTML 例子:


<div>
<span></span>
<img alt="" src=""/>
</div>


http://www.screencast.com/user ... ccde8

詹大官人

赞同来自:

这是一个选择 PHP.

这是很多代码,但它就像一个咒语一样。 在阅读本主题的几个帖子后,我提出了这个。 它在十五和div的固定宽度上定位各种尺寸的图像

你 CSS 必须包含它:


.friend_photo_cropped{
overflow: hidden;
height: 75px;
width: 75px;
position:relative;
}
.friend_photo_cropped img{
position:relative;
}


您的代码应该是:


php
list/$width, $height/ = getimagesize/$yourImage/;
if /$width=$height/
{
$h = '75';
$w = round//75/$height/*$width/;
}
else
{
$w = '75';
$h = round//75/$width/*$height/;
}
$top = -round//$h-75//2/;
$left = -round//$w-75//2/;
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
echo '<img height="'.$h.'" src="'.$yourImage.'" style="top:'.$top.'px;left:'.$left.'px;" width="'.$w.'"/>';
echo '</div>';
echo '</td>';
?>

快网

赞同来自:

您还可以对齐这条路径。 至少,所以我做到了,它为我工作了。 也许这不是最好的方式。 我在固定大小的部门内有一堆不同尺寸的标志。

首先获得图像大小。 然后,基于你的高度 div, 你可以找到应该是顶级的东西。 它将是垂直居中的。 只需更改值 $IMG_URL 和 $DIVHEIGHT.


list/$width, $height, $type, $attr/ = getimagesize/$IMG_URL/;
$margin-top = number_format//$DIVHEIGHT - $height/ / 2, 0/;


例如。


<div .$margin-top."px\"="" style="margin-top:"><img src=""> </img></div>

风见雨下

赞同来自:

使用 height:100% 对于标签 html, 标签 body, 集装箱和空占位符元素加 display:inline-block; 和 vertical-align: middle 对于不同浏览器中具有无限高度的内容垂直中心的内容和聚合。 元素填充物设置高度 100% 支持行块,所以 vertical-align: middle 它具有所需的效果。 使用固定宽度容器进行图像包装。

使用 display:inline 为了 content div 和 text-align center 为了 container div, 在不同的浏览器中执行具有无限宽度的内容的水平居中。

组合这两种方法创建居中图像库:


html
<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}

img { margin-left: 20px; margin-top: 10px; }

.container { text-align:center; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.fixed { width: 900px; }

.content { display:inline; }

@media,
{
.wrapper { display:inline; }
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<div class="fixed">
<img src="[url=http://microsoft.com/favicon.ico"/>]http://microsoft.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://microsoft.com/favicon.ico"/>]http://microsoft.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
<img src="[url=http://mozilla.com/favicon.ico"/>]http://mozilla.com/favicon.ico"/>[/url]
<img src="[url=http://webkit.org/favicon.ico"/>]http://webkit.org/favicon.ico"/>[/url]
<img src="[url=http://userbase.kde.org/favicon.ico"/>]http://userbase.kde.org/favicon.ico"/>[/url]
<img src="[url=http://www.srware.net/favicon.ico"/>]http://www.srware.net/favicon.ico"/>[/url]
<img src="[url=http://build.chromium.org/favicon.ico"/>]http://build.chromium.org/favicon.ico"/>[/url]
<img src="[url=http://www.apple.com/favicon.ico"/>]http://www.apple.com/favicon.ico"/>[/url]
<img src="[url=http://opera.com/favicon.ico"/>]http://opera.com/favicon.ico"/>[/url]
</div>
</div>
</div>
<span class="placeholder"></span>
</div>
</body>
</html>

董宝中

赞同来自:

我用了


.on/'load', function // {


反而


.each/function//{


使用

它有助于在尚未加载图像时消除空高度和宽度的问题。


<style type="text/css">
.fixed-div {
position: relative;
}

.variable {
width: 100%;
height: auto;
}

.variable.js-fix {
position:absolute;
top:50%;
left:50%;
}
</style>
<script type="text/javascript">
jQuery/document/.ready/function//{
$/".fixed-div img.variable"/.on/'load', function // {
//get height and width /unitless/ and divide by 2
var hWide = /$/this/.width////2; //half the image's width
var hTall = /$/this/.height////2; //half the image's height, etc.
console.log/"width", $/this/.width///;
console.log/"height", $/this/.height///;

// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';

$/this/.addClass/"js-fix"/.css/{
"margin-left" : hWide,
"margin-top" : hTall
}/;
}/;
}/;
</script>
<div class="fixed-div">
<img class="variable" src="">
</img></div>

小姐请别说爱

赞同来自:

居中图像水平和垂直

DEMO

:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/
/


.section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate/-50%, -50%/
}

奔跑吧少年

赞同来自:

从 CSS3 flexbox 您将不再需要Khaki迎来图像。 目前,所有现代浏览器都支持。 查看

http://caniuse.com/#search=flexbox


.container {
display: flex; /* Flexible layout container */
justify-content: center; /* Horizontal center alignment */
align-items: center; /* Vertical center alignment */
background: lightblue;
/* Fixed size container */
height: 300px;
width: 300px;
}



<div class="container">
<img src="[url=http://placehold.it/150x150"/>]http://placehold.it/150x150"/>[/url]
</div>

要回复问题请先登录注册