HTML - 如何在使用 float left 时将 img 和文本居中放置在 div 中？

Question

我在一个 div 父级中有一个图像和文本，

我需要将图片和文字移到中心，

但要让文字显示在 img 旁边，我需要使用 float: left

这是示例代码:

.boxtitlestillneedHeader {
    background-color:#ff00 ; margin-bottom:15px;
}
.boxtitlestillneed {
    color:#000000; font-size:26px; margin-bottom:1px; font-weight: bold;
}
.smal{
    font-size: 20px;
}
.larg{
    font-size: 40px;
    color: red;
}
.inn{
    width: 50%;
    margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 col-sm-12 col-xs-12">
	<div class="col-md-1 col-sm-1 col-xs-12"></div>
	<div class="col-md-12 col-sm-12 col-xs-12 text-left boxtitlestillneedHeader" id="status">
		<div class="col-md-12 col-sm-12 col-xs-12 boxtitlestillneed">
			<img src="https://image.flaticon.com/icons/png/128/50/50268.png" class="img-responsive" style="float: left; margin-left: 25%;">
			<span class="need smal inn">you still need</span><br>
			<span class="curr larg site-font-bold">IDR</span>
			<span id="resultMoney" class="larg site-font-bold">2,1</span><br>
			<span id="lifep4c2" class="smal">foo foo foo foo foo foo foo foo foo</span>
		</div>
	</div>
	<div class="col-md-1 col-sm-1 col-xs-12"></div>
</div>

有没有办法不用margin-left: n%就可以让图片和文字居中？

jsfiddle

Answer 1

您可以使用文本居中对齐来居中对齐文本。

.smal{
font-size: 20px;
text-align:center;
}

这应该使图像居中。将此应用于保存图像的容器。希望对您有所帮助。

.boxtitlestillneedHeader {
display: flex;
justify-content: center;
align-items: center;
}