水平对齐，图像顶部有文字？

问题描述：

Hia！我在我想要的图像一侧有文字。如下所示。水平对齐，图像顶部有文字？

https://image.ibb.co/bWWO0F/Capture.jpg

然而，我挣扎着爬在图像的顶部的文本，就像我的惊人绘画这里...

https://image.ibb.co/ksgZ7v/Capture1.jpg

我怎么可以这样做呢？

这是我的HTML ...

<div> 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg"> 
    <p>Works.</p> 
</div>

真的对不起你们，不能让降价来工作，我代表点我能勉强做任何事情，用我的知识...请查看此链接？ https://anotepad.com/notes/32na8h –

明白了！没关系:) –

答

使用flexbox。

.flexbox { 
 
    display: flex; 
 
    border: 1px solid; 
 
    padding: 15px; 
 
} 
 

 
.img-circle { 
 
    border-radius: 100%; 
 
}

<div class="flexbox"> 
 
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350"> 
 
    <p>Works.</p> 
 
</div>

什么不行？ – Sun

没关系！它的工作，配合你的传奇！干杯! –

答

使用break标签，你可以用简单的HTML做到这一点。

<label>Text</label> 
<br> 
<img>

是的，这很简单，但它不是可扩展的。我的意思是，你可以分割线条，但实际上并不确定高度或位置或实际上任何东西。为了使这是正确的方式，而不是马虎，你需要实现CSS。

谢谢！它可以在图像的顶部生成文本，但我在同一行上查找文本，但只是格式化为顶部......知道我的意思吗？ –

水平对齐，图像顶部有文字？

相关推荐