HTML：中心图像标题相对于图像？ [英] HTML: center image caption relative to image?

问题描述

我想编写HTML来将图片标题与图片中心相对对齐。

我想将图片和字幕放在一起到左边。

无论包含元素的宽度如何，这都应该是真的。

这是我到目前为止：

  [unknown contains元素] 
< div style =align：left; text-align：center;> 
< img src =white.jpgheight =31pxwidth =200px/> 
< span>某些字幕文字< / span> 
< / div> 
 [/ unknown] 
  

但是它将标题文字中心与包含元素相对齐。

我需要解决什么问题？

谢谢！

解决方案

如果您确实相对于图像，请将标题元素设置为与图像一样宽，然后居中文本。为了能够在caption元素上设置宽度，它需要是一个块元素，所以我将它改为：

  < div style =align：left; text-align：center;> 
< img src =white.jpgheight =31pxwidth =200px/> 
< div class =caption>一些标题文字< / div> 
< / div> 
 
 .caption {
 width：200px; 
 text-align：center; 
} 
  

如果更容易，您可以使用内联CSS设置宽度。

 < div style =align：left; text-align：center;> 
< img src =white.jpgheight =31pxwidth =200px/> 
< div class =captionstyle =width：200px>一些标题文字< / div> 
< / div> 
 
 .caption {
 text-align：center; 
} 
  

I'd like to write HTML to align an image caption in the centre relative to the image.

I'd like to align the image and the caption together to the left.

This should be true whatever the width of the containing element.

This is what I have so far:

[unknown containing element]
<div style="align: left; text-align:center;">
<img src="white.jpg" height="31px" width="200px" />
<span>Some caption text</span>
</div>
[/unknown]

But it's aligning the caption text centre relative to the containing element.

What do I need to fix?

Thanks!

解决方案

If you really mean relative to the image, make the caption element as wide as the image, then center the text. To be able to set a width on the caption element it needs to be a block element, so I changed it from to :

<div style="align: left; text-align:center;">
    <img src="white.jpg" height="31px" width="200px" />
    <div class="caption">Some caption text</div>
</div>

.caption {
    width: 200px;
    text-align: center;
}

You might set the width with inline CSS if that is easier.

<div style="align: left; text-align:center;">
    <img src="white.jpg" height="31px" width="200px" />
    <div class="caption" style="width: 200px">Some caption text</div>
</div>

.caption {
    text-align: center;
}

这篇关于HTML：中心图像标题相对于图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！