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

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

1 个答案: