[英]CSS vertical alignment problem
Consider the following example: ( live demo here )考虑以下示例:(此处为现场演示)
HTML: HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS: CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is: output 是:
wrapper
s are not vertically aligned?wrapper
没有垂直对齐? How could I fix that? Please do not change the HTML, if possible.如果可能,请不要更改 HTML。
Observe that it is the base of the images which are aligned.观察它是对齐的图像的基础。 This is to do with the
vertical-align
;这与
vertical-align
有关; if you use a value for vertical-align
on .wrapper
other than baseline
, like top
, middle
or bottom
, it will fix it.如果您在
.wrapper
上使用除baseline
之外的vertical-align
值,例如top
、 middle
或bottom
,它将修复它。 (The difference between these will only be apparent if you put some text inside the div
as well.) (只有在
div
中也放入一些文本时,它们之间的区别才会很明显。)
Then you want to centre the images in their 80x80 spots.然后,您希望将图像置于 80x80 点的中心。 You can do that with
display: table-cell
and vertical-align: middle
on the a
(and add line-height: 0
to fix a couple more issue).您可以使用
display: table-cell
和vertical-align: middle
在a
上(并添加line-height: 0
以解决更多问题)。 You can then play further with mixing these groups of styles in the a
tag, the .wrapper
, or even throwing away the .wrapper
if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).然后,您可以在
a
标签、 .wrapper
中混合这些 styles 组,或者甚至在不需要时.wrapper
(仅需要 - 如果需要的话 - 如果你是将文本放入其中)。
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/ .结果,没有比我在这里提到的更进一步的调整: http://jsfiddle.net/jESsA/38/ 。
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7.这适用于所有体面的浏览器,甚至适用于 IE8/9,但不适用于 IE6/7。 A technique for solving this which should work in IE6/7 is this: on the
a
, set display
to block
and alter the line-height
from 0
to 78px
(I'm not entirely clear on why 80px
makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle
to the img
child.解决这个问题的技术应该在 IE6/7 中起作用:在
a
上,设置display
以block
并将line-height
从0
更改为78px
(我不完全清楚为什么80px
使它向下移动一个像素,但确实如此;如果我想了足够长的时间,我可能会弄清楚为什么),并将vertical-align: middle
移到img
孩子。 Final result: http://jsfiddle.net/jESsA/44/最终结果: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align
attribute on the img
tag.您可以尝试在
img
标签上分配一个vertical-align
属性。 Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a
tag.垂直对齐是相对于行框的,这意味着您需要将行框设置为与
a
标签的高度一样高。 So these changes are needed in your CSS markup:因此,您的 CSS 标记中需要进行这些更改:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Take a look at this:看看这个:
http://jsfiddle.net/jESsA/37/ http://jsfiddle.net/jESsA/37/
Basically you use float: left
to put your boxes inline and a background image instead of an img tag.基本上,您使用
float: left
将您的框内联和背景图像而不是img标签。 Because you are using float , you need to clear after to cancel the float effect on other elements.因为您使用的是float ,所以您需要clear after 以取消对其他元素的浮动效果。
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple.我将 DIV 标签更改为 A 标签,这样您就可以在孔块上有一个链接并保持简单。 But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
但是您可以将其保留为 DIV 标记并在其中放置一个 A 块(或使用 JavaScript)
.wrapper {
float: left;
}
You could check this out: http://www.brunildo.org/test/img_center.html你可以看看这个: http://www.brunildo.org/test/img_center.html
may be this will help you可能这会帮助你
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me:)它帮助了我:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.