本文共 11759 字,大约阅读时间需要 39 分钟。
如何在包含div
内部对齐图像?
在我的示例中,我需要使用class ="frame
”将<img>
在<div>
垂直居中:
.frame
的高度是固定的,图像的高度是未知的。 如果这是唯一的解决方案,则可以在.frame
添加新元素。 我正在尝试在Internet Explorer 7和更高版本的WebKit,Gecko上执行此操作。
在查看jsfiddle。
.frame { height: 25px; /* Equals maximum height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
这可能有用:
div { position: relative; width: 200px; height: 200px;}img { position: absolute; top: 0; bottom: 0; margin: auto;}.image { min-height: 50px}
参考: :
我有同样的问题。 这对我有用:
我的解决方案: :
.container { display: table; float: left; border: solid black 1px; margin: 2px; padding: 0; background-color: black; width: 150px; height: 150px;}.frame { display: table-cell; text-align: center; vertical-align: middle; border-width: 0;}.img { max-width: 150px; max-height: 150px; vertical-align: middle;}
matejkramny的解决方案是一个不错的开始,但是过大的图像比例错误。
这是我的叉子:
演示: :
HTML:
CSS:
.frame { height: 160px; /* Can be anything */ width: 160px; /* Can be anything */ position: relative;}img { max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
这样,您可以将图像垂直居中( ):
div{ height: 150px; // Internet Explorer 7 fix line-height: 150px;}img{ vertical-align: middle; margin-bottom: 0.25em;}
我不确定Internet Explorer,但是在Firefox和Chrome下,如果div
容器中有img
,则以下CSS内容应该可以使用。 至少对我来说效果很好:
div.img-container { display: table-cell; vertical-align: middle; height: 450px; width: 490px;}div.img-container img { max-height: 450px; max-width: 490px;}
最好的解决方案是
.block{ /* Decor */ padding:0 20px; background: #666; border: 2px solid #fff; text-align: center; /* Important */ min-height: 220px; width: 260px; white-space: nowrap;}.block:after{ content: ''; display: inline-block; height: 220px; /* The same as min-height */ width: 1px; overflow: hidden; margin: 0 0 0 -5px; vertical-align: middle;}.block span{ vertical-align: middle; display: inline-block; white-space: normal;}
三行解决方案:
position: relative;top: 50%;transform: translateY(-50%);
这适用于任何东西。
从 。
一个对我有用的简单方法:
img { vertical-align: middle; display: inline-block; position: relative;}
它非常适合Google Chrome浏览器。 在其他浏览器中尝试一下。
我一直在使用填充进行中心对齐。 您将需要定义顶层外部容器的大小,但是内部容器应调整大小,并且可以将填充设置为不同的百分比值。
.container { padding: 20%; background-color: blue;}img { width: 100%;}
对于更现代的解决方案,如果不需要支持旧版浏览器,则可以执行以下操作:
.frame { display: flex; /** Uncomment 'justify-content' below to center horizontally. ✪ Read below for a better way to center vertically and horizontally. **/ /* justify-content: center; */ align-items: center; } img { height: auto; /** ✪ To center this image both vertically and horizontally, in the .frame rule above comment the 'justify-content' and 'align-items' declarations, then uncomment 'margin: auto;' below. **/ /* margin: auto; */ } /* Styling stuff not needed for demo */ .frame { max-width: 900px; height: 200px; margin: auto; background: #222; } p { max-width: 900px; margin: 20px auto 0; } img { width: 150px; }
这是一支钢笔: :
flexbox有一个超级简单的解决方案!
.frame { display: flex; align-items: center;}
您可以尝试以下代码:
.frame{ display: flex; justify-content: center; align-items: center; width: 100%; }
有时应通过显示为table / table-cell来解决。 例如,快速标题屏幕。 这也是W3推荐的方式。 我建议您检查此链接,该链接称为W3C.org中的“ 。
这里使用的技巧是:
.container { position: absolute; display: table; width: 100%; height: 100%; } .content { display: table-cell; vertical-align: middle; }
Peace in the world
就我个人而言,我实际上不同意为此目的使用辅助工具。
使用这个:
position: absolute;top: calc(50% - 0.5em);left: calc(50% - 0.5em);line-height: 1em;
您可以更改font-size
。
是否要对齐文本/标题之后且都在div内的图像?
参见或运行代码片段。
只要确保在所有元素(div,img,标题等)上都有一个ID或一个类即可。
对我来说,此解决方案可在所有浏览器上使用(对于移动设备,您必须使用@media修改代码)。
h2.h2red { color: red; font-size: 14px; } .mydivclass { margin-top: 30px; display: block; } img.mydesiredclass { margin-right: 10px; display: block; float: left; /* If you want to allign the text with an image on the same row */ width: 100px; heght: 100px; margin-top: -40px /* Change this value to adapt to your page */; }
Text aligned after image inside a div by negative manipulate the img position
使用table
和table-cell
方法可以完成这项工作,特别是因为您也以一些旧的浏览器为目标,所以我为您创建了一个片段,您可以运行它并检查结果:
.wrapper { position: relative; display: table; width: 300px; height: 200px; } .inside { vertical-align: middle; display: table-cell; }
Centre me please!!!
为了使图像居中放置在容器(可能是徽标)中,除了像这样的一些文字:
基本上,您包装图像
.outer-frame { border: 1px solid red; min-height: 200px; text-align: center; /* Only to align horizontally */ } .wrapper{ line-height: 200px; border: 2px dashed blue; border-radius: 20px; margin: 50px } img { /* height: auto; */ vertical-align: middle; /* Only to align vertically */ }
some text
这段代码对我很有用。
另外,您可以使用Flexbox获得正确的结果:
.parent { align-items: center; /* For vertical align */ background: red; display: flex; height: 250px; /* justify-content: center; <- for horizontal align */ width: 250px; }
您可以使用此:
.loaderimage { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; /* 50% of the height */ margin-left: -30px; }
想像你有
和CSS:
.wrap { display: flex;}.wrap img { object-fit: contain;}
这适用于现代浏览器(编辑时为2016年),如本
.frame { height: 25px; line-height: 25px; width: 160px; border: 1px solid #83A7D3; }.frame img { background: #3A6F9A; display:inline-block; vertical-align: middle;}
给图像一个类或使用继承来定位需要居中的图像非常重要。 在此示例中,我们使用.frame img {}
以便仅将由div包装的带有.frame
类的图像作为目标。
背景图片解决方案
我完全删除了图像元素,并使用.frame
类将其设置为div的背景
至少在Internet Explorer 8,Firefox 6和Chrome 13上可以正常工作。
我检查了一下,该解决方案无法缩小大于25像素高度的图像。 有一个称为background-size
的属性可以设置元素的大小,但是CSS 3会与Internet Explorer 7的要求相冲突。
我建议您要么重新设置浏览器优先级并设计最佳的浏览器,要么获得一些服务器端代码来调整图像的大小(如果您想使用此解决方案)。
您可以这样做:
.frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; position: relative; /* Changes here... */}img { background: #3A6F9A; max-height: 25px; max-width: 160px; top: 50%; /* Here.. */ left: 50%; /* Here... */ position: absolute; /* And here */}
$("img").each(function(){ this.style.marginTop = $(this).height() / -2 + "px";})
.frame { height: 35px; /* Equals maximum image height */ width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; display: table-cell; vertical-align: middle;}img { background: #3A6F9A; display: block; max-height: 35px; max-width: 160px;}
关键属性为display: table-cell;
对于.frame
。 Div.frame
与此内联显示,因此您需要将其包装在block元素中。
这适用于Firefox,Opera,Chrome,Safari和Internet Explorer 8(及更高版本)。
更新
对于Internet Explorer 7,我们需要添加一个CSS表达式:
*:first-child+html img { position: relative; top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");}
纯 CSS解决方案:
.frame { margin: 1em 0; height: 35px; width: 160px; border: 1px solid red; position: relative; } img { max-height: 25px; max-width: 160px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #3A6F9A; }
关键的东西
// position: relative; - in .frame holds the absolute element within the frame// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component// margin: auto; - centers the image horizontally & vertically
使用纯CSS 尝试此解决方案
也许这是HTML的主要问题。 当你定义c您没有使用引号lass
和image height
在你的HTML。
CSS:
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; position: relative; margin: 1em 0; top: 50%; text-align: center; line-height: 24px; margin-bottom: 20px;}img { background: #3A6F9A; vertical-align: middle; line-height: 0; margin: 0 auto; max-height: 25px;}
当我处理img
标签时,它与top
距离为3像素到2像素。 现在,我降低line-height
,它正在工作。
CSS:
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; margin: 1em 0; text-align: center; line-height: 22px; *:first-child+html line-height:24px; /* For Internet Explorer 7 */ } img { background: #3A6F9A; vertical-align: middle; line-height: 0; max-height: 25px; max-width: 160px; }@media screen and (-webkit-min-device-pixel-ratio:0) { .frame { line-height:20px; /* WebKit browsers */ }
在不同的浏览器中, line-height
属性的呈现方式有所不同。 因此,我们必须定义不同的line-height
属性浏览器。
检查此示例: :
查看此示例,了解不同浏览器中的line-height
不同:
据我所知,唯一(也是最好的跨浏览器)方法是在两个元素上使用height: 100%
和vertical-align: middle
的inline-block
帮助器。
因此,有一个解决方案: :
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */ text-align: center; margin: 1em 0; } .helper { display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
或者,如果您不想在现代浏览器中添加多余的元素并且不介意使用Internet Explorer表达式,则可以使用伪元素,然后使用方便的表达式将其添加到Internet Explorer,该表达式每个元素仅运行一次,因此不会有任何性能问题:
Internet Explorer的: :before
和expression()
解决方案: :
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; } .frame:before, .frame_before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } /* Move this to conditional comments */ .frame { list-style:none; behavior: expression( function(t){ t.insertAdjacentHTML('afterBegin',''); t.runtimeStyle.behavior = 'none'; }(this) ); }
怎么运行的:
当您有两个彼此相邻的inline-block
元素时,您可以使它们彼此对齐,因此,使用vertical-align: middle
您将得到如下所示的内容:
当您使用固定高度的块(以px
, em
或其他绝对单位表示)时,可以将内部块的高度设置为%
。
height: 100%
inline-block
height: 100%
在高度固定的块中height: 100%
将使其中的另一个inline-block
元素(在您的情况下为<img/>
)垂直对齐。 您可以尝试将PI的CSS设置为display: table-cell; vertical-align: middle;
display: table-cell; vertical-align: middle;
如果您可以使用像素大小的边距,只需添加font-size: 1px;
到.frame
。 但是请记住,现在在.frame
1em = 1px上,这意味着您也需要以像素为单位设置边距。
现在它不再在Opera中居中...
转载地址:http://frogj.baihongyu.com/