CSS如何在不改变图像样式的情况下垂直居中图像和文本

Posted 2023-03-05

【中文标题】CSS如何在不改变图像样式的情况下垂直居中图像和文本

【英文标题】：CSS how to vertically center image and text without changing style of image

【发布时间】：2012-07-02 10:04:52

【问题描述】：

我有一张图片和一些文字。我想在<div> 中将它们垂直居中。 在 NOT 更改 <img> 标记中的任何内容时，我该如何做到这一点？

我知道很多人建议如下：

<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span> 
</div>

由于某些原因，我不想更改<img> 标记中的任何内容。我可以通过仅在<div> 或<span> 或其他地方添加样式来将它们都居中吗？

顺便说一句，我也知道有人说以下方法可行：

<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>

但这对我不起作用。那么有什么想法吗？

谢谢。

【问题讨论】：

您无法在文档中包含外部样式表吗？

你从什么 html 和 CSS 开始？

【参考方案1】：

试试这个 - http://jsfiddle.net/J4QJA/

div 
    height: 300px;
    background: beige;
    line-height: 300px;


img 
    vertical-align: middle;

​

...

更新

如果您不能/不想将任何样式应用于<img>，您可以使用包装器 - http://jsfiddle.net/J4QJA/3/

HTML

<div class="wrapper">
    <div class="image-wrapper">
        <img src="http://lorempixel.com/200/100" />
    </div>
    <div class="image-wrapper">
        Lorem ipsum doloe sit amet
    </div>
</div>​

CSS

div.wrapper 
    height: 300px;
    background: beige;


div.image-wrapper 
    display: block;
    position: relative;
    top: 50%;
    margin-top: -50px; /* half of your image height */
    line-height: 100px;
    width: 200px;
    float: left;

【讨论】：

感谢您的建议。但正如我所说，我不能在 标签中添加任何样式，这意味着我不能放置“vertical-align: middle;”在那里为img。我知道这会起作用，但它不能解决我的问题。

无需将height 和line-height 添加到<div>：jsfiddle.net/J4QJA/1

@user1387727：所以你想让<img>标签有不同的样式，但你不想对其应用任何样式？

@PaulD.Waite 以防万一div 比图片高 - jsfiddle.net/J4QJA/2

@user1387727 您必须仅使用内联 CSS？