Question

我想编写HTML以将图像标题与图像对齐。

我想将图片和标题对齐在一起到左边。

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

这是我到目前为止所做的：

[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]

但它正在将标题文本中心与包含元素对齐。

我需要修理什么？

谢谢！

Answer 1

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

<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;
}

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

<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;
}

Answer 2

您需要将<span>表示为块元素。

看看这个：http://jsfiddle.net/szNvt/

Answer 3

图像中心图像标题

.container {padding:0.1em}		
.display-container {position:relative; width:50%}

.display-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%)
}

img {width: 100%;}

    <div class="container">					
      <div class="display-container">			
      
        <img src="http://lorempixel.com/400/200/sports/10" />							
        <div class="display-middle">
          <p>strikee .. !</p>
        </div>
							
      </div>					
    </div>

HTML：相对于图像的中心图像标题？

3 个答案:

图像中心图像标题