Answers:
实际上,在这种情况下,这非常简单:对图像应用垂直对齐。由于所有内容都在同一行中,因此它实际上是要对齐的图像,而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
在FF3中测试。
现在,您可以将flexbox用于这种类型的布局。
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
width:16px;height:16px
),则可以看到图像太小了……
以下是一些用于垂直对齐的简单技术:
这很简单:将text元素的line-height设置为等于容器的高度
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
相对于其容器绝对定位内部div
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
为了使它能够全面正常工作,您必须稍微修改一下CSS。幸运的是,有一个IE错误对我们有利。设置top:50%
在容器上,并top:-50%
在内部DIV,可以达到同样的效果。我们可以使用IE不支持的另一功能将两者结合:高级CSS选择器。
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
此解决方案需要利用其他transform: translateY
属性,因此它需要比其他解决方案稍微现代的浏览器。(http://caniuse.com/#feat=transforms2d)
将以下3行CSS应用于元素将使其在父元素内垂直居中,而不考虑父元素的高度:
position: relative;
top: 50%;
transform: translateY(-50%);
display:table
和display:table-cell
当然除了CSS选择工作的伟大,在IE7及以下。在将头发拉扯了几个小时之后,我认为我真的不需要与仍然使用IE7-的任何人打交道。
display:table
在各种浏览器中都有一些限制(max-height
如果元素在表单元格之内,则在IE11中不起作用),因此在某些情况下,使用表单元格垂直对齐不是一个好主意。
将您更改div
为flex容器:
div { display:flex; }
现在有两种方法可以使所有内容的对齐方式居中:
方法1:
div { align-items:center; }
方法2:
div * { margin-top:auto; margin-bottom:auto; }
在上尝试使用不同的width和height值,img
并在上尝试使用不同的字体大小值span
,您会发现它们始终保留在容器的中间。
justify-content: center;
和间距(不使用<br/>标签),您可能还想放入padding: 1em;
。对我们现代浏览器开发人员来说是个伟大的更新。
您必须同时应用vertical-align: middle
这两个元素才能使其居中。
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
该接受的答案呢中心图标文本周围的x高度的一半旁边(如定义的CSS规范)。如果文本的上升或下降部分仅在顶部或底部突出,那么这可能已经足够好了,但看起来可能有点过头:
左边是未对齐的文本,右边是如上所示的文本。可以在本文中找到有关vertical-align的实时演示。
有人谈论过为什么vertical-align: top
在这种情况下可行吗?问题中的图像可能比文本高,因此定义了线框的顶部边缘。vertical-align: top
然后将其放在span元素上,然后将其放在行框的顶部。
vertical-align: middle
和之间的主要区别top
在于,第一个相对于框的基线(放置在需要完成所有垂直对齐的位置,因此感觉很难预测)相对于基线移动元素,第二个相对于线框的外部边界(即更明显)。
如此处所述,接受的答案中使用的技术仅适用于单行文本(demo),而不适用于多行文本(demo)。
如果有人需要将多行文本垂直居中放置图像,可以采用以下几种方法(此CSS-Tricks文章启发了方法1和2 )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS(上面的小提琴包含供应商前缀):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
这段代码可在IE和FF中使用:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
作为记录,对齐“命令”在SPAN上不起作用,因为它是行内标签,而不是块级标签。诸如对齐,边距,填充等之类的内容在行内标签上不起作用,因为行内点不是为了干扰文本流。
CSS将HTML标签分为两组:内联和块级。搜索“ css块与内联”,然后出现一篇很棒的文章...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(了解CSS的核心原理是使其不那么令人讨厌的关键)
text-align
和vertical-align
(连同其上的应用程序的例外td
用于遗留目的元件)具体意味着inline
和inline-block
元件(span
,img
等)。
使用line-height:30px
的跨度,使文字与图片对齐:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
您可以做的另一件事是将文本的line-height
大小设置为中的图像大小<div>
。然后将图像设置为vertical-align: middle;
这是最简单的方法。
有没有看到一个解决方案margin
在回答这些问题的呢,所以这里是我的解决这个问题。
仅当您知道图像的宽度时,此解决方案才有效。
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
多线解决方案:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
适用于所有浏览器和ie9 +
我同意,这可能会造成混淆。尝试利用表格功能。我使用这个简单的CSS技巧将模式放置在网页的中心。它具有较大的浏览器支持:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
和CSS部分:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
请注意,您必须设置样式并调整图像和表格容器的大小,以使其按需工作。请享用。
首先,根本不建议使用内联CSS,它会弄乱您的HTML。
要对齐图像和跨度,只需执行vertical-align:middle
。
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
不知道为什么它不能在导航的浏览器中呈现它,但是当试图显示带有图像和居中文本的标题时,我通常使用这样的代码段,希望对您有所帮助!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
您可能想要这样:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
正如其他人所建议的,请尝试vertical-align
以下图像:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS并不令人讨厌。您只是不阅读文档。; P
vertical-align