任何人都可以使用 HTML 和 CSS 垂直对齐图像吗？

发布于 2024-11-01 10:14:52 字数 990 浏览 0 评论 0原文

我不确定是否可以用 CSS 来完成，但想在这里确认一下。

HTML:

<div class="wraptocenter"><span></span>
<img src="blah" /></div> 
<div class="description">Lorizzle ipsum dolor sit amizzle, tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget tortizzle. Sizzle </div>

CSS:

.wraptocenter {   
background: orange;
float: left;
height: 120px;
margin: 0 10px 5px 0;
width: 120px;
}

.wraptocenter img {
    max-height: 120px;
    width:120px;
}

一些技巧，例如 http://www.brunildo.org/test/img_center.html 有效，但如果我浮动 div，它就会停止工作。

我将 div 浮动，以便另一个包含文本的 div 可以像报纸文章一样环绕图像。

另外，我从不同的网站获取图像，并将宽度设置为 120px。因此，每次都会使高度动态且不同。

这可能吗？谢谢。

原文

I'm not sure if there is can be done with CSS, but wanted to confirm it here.

This is the code snippet..
http://jsfiddle.net/2CHEb/

HTML:

<div class="wraptocenter"><span></span>
<img src="blah" /></div> 
<div class="description">Lorizzle ipsum dolor sit amizzle, tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget tortizzle. Sizzle </div>

CSS:

.wraptocenter {   
background: orange;
float: left;
height: 120px;
margin: 0 10px 5px 0;
width: 120px;
}

.wraptocenter img {
    max-height: 120px;
    width:120px;
}

Some tricks like http://www.brunildo.org/test/img_center.html
works, but if I float the div, it stops working.

I'm Floating the div, so that another div containing Text can wrap around the image like a newspaper article.

Also, I'm getting the image from different website, and set the width to 120px. So, it will make height dynamic and different each time.

Is this possible?
Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

音盲 2024-11-08 10:14:52

如果您在 .wraptocenter 上放置 position:relative; ，然后放置 position:absolute;浮动：左；顶部：50%； margin:-60px 0 0 0; 你可以垂直居中。

您的另一个选择是使图像成为背景图像并用百分比（或像素）定位它

回复收藏 0 原文

乖不如嘢 2024-11-08 10:14:52

这适用于现代浏览器和 IE8+。

IE7 根本不支持 display: table-cell。我希望您不需要 IE7 支持:)

http://jsfiddle.net/2CHEb/6/

.wraptocenter {   
    float: left;
    margin: 0 10px 5px 0;
}
.wraptocenter > div {
    height: 120px;
    width: 120px;
    background: orange;
    display: table-cell;
    vertical-align: middle
}
.wraptocenter img {
    max-height: 120px;
    width: 120px;
    display: block
}

This will work in modern browsers and IE8+.

IE7 simply does not support display: table-cell. I hope you don't need IE7 support :)

http://jsfiddle.net/2CHEb/6/

.wraptocenter {   
    float: left;
    margin: 0 10px 5px 0;
}
.wraptocenter > div {
    height: 120px;
    width: 120px;
    background: orange;
    display: table-cell;
    vertical-align: middle
}
.wraptocenter img {
    max-height: 120px;
    width: 120px;
    display: block
}

回复收藏 0 原文

~没有更多了~