垂直和水平居中内部的图像 Div, 如果您不知道图像的大小？
如果我有一个固定大小的容器 div 和未知尺寸的图像，如何将其级水平和垂直居中？
使用清洁 css
使用 JQuery, 如果一个 css 不能这样做
https://coderoad.ru/388180/
用于图像
固定宽度
, 但不是可变图像。
像这种结构的东西 /我是说
http://net.tutsplus.com/
, 但是，左侧的图像不会总是具有相同的大小：
谢谢您的帮助！
使用清洁 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>
谢谢您的帮助！
没有找到相关结果
已邀请:
12 个回复
石油百科
赞同来自:
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, 宣布高度和
.
[重要的 JS 编辑：切换 '.style//" 到 ".css//']
八刀丁二
赞同来自:
.
#your_div {background-position: center center;
background-image: url/'your_image.png'/;
}
小明明
赞同来自:
http://www.jakpsatweb.cz/css/c ... .html
</div>
<div class="answer_text">
检查我的决定：
http://codepen.io/petethepig/pen/dvFsA
它是纯粹的 CSS, 没有任何代码 JS. 它可以处理任何大小和任何方向的图像。
再加一 div 在代码中 HTML :
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;
}
更新：
我摆脱了这个元素
赞成选择器
CSS
</div>
<div class="answer_text">
如果您不知道图像的大小，但在容器大小旁边下载的照片 /可能的大或较小的图像/, 这篇文章可能很有用。 适合我的东西 - 这是以下代码：
在文件中 .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 将是完美的中心。 我希望这篇文章对某人有用！
</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 例子：
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;
}
您的代码应该是：
</div>
<div class="answer_text">
您还可以对齐这条路径。 至少，所以我做到了，它为我工作了。 也许这不是最好的方式。 我在固定大小的部门内有一堆不同尺寸的标志。
首先获得图像大小。 然后，基于你的高度 div, 你可以找到应该是顶级的东西。 它将是垂直居中的。 只需更改值 $IMG_URL 和 $DIVHEIGHT.
例如。
</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, 在不同的浏览器中执行具有无限宽度的内容的水平居中。
组合这两种方法创建居中图像库：
</div>
<div class="answer_text">
我用了
.on/'load', function // {反而
.each/function//{使用
它有助于在尚未加载图像时消除空高度和宽度的问题。
</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>
裸奔
赞同来自:
http://codepen.io/petethepig/pen/dvFsA
它是纯粹的 CSS, 没有任何代码 JS. 它可以处理任何大小和任何方向的图像。
再加一 div 在代码中 HTML :
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;
}
更新：
我摆脱了这个元素
赞成选择器
CSS
詹大官人
赞同来自:
在文件中 .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 将是完美的中心。 我希望这篇文章对某人有用！
小明明
赞同来自:
正确的工作： 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 例子：
http://www.screencast.com/user ... ccde8
詹大官人
赞同来自:
这是很多代码，但它就像一个咒语一样。 在阅读本主题的几个帖子后，我提出了这个。 它在十五和div的固定宽度上定位各种尺寸的图像
你 CSS 必须包含它：
.friend_photo_cropped{overflow: hidden;
height: 75px;
width: 75px;
position:relative;
}
.friend_photo_cropped img{
position:relative;
}
您的代码应该是：
快网
赞同来自:
首先获得图像大小。 然后，基于你的高度 div, 你可以找到应该是顶级的东西。 它将是垂直居中的。 只需更改值 $IMG_URL 和 $DIVHEIGHT.
例如。
风见雨下
赞同来自:
使用 display:inline 为了 content div 和 text-align center 为了 container div, 在不同的浏览器中执行具有无限宽度的内容的水平居中。
组合这两种方法创建居中图像库：
董宝中
赞同来自:
.on/'load', function // {反而
.each/function//{使用
它有助于在尚未加载图像时消除空高度和宽度的问题。
小姐请别说爱
赞同来自:
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%/
}
奔跑吧少年
赞同来自:
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;
}