在浮动div中保持项居中的问题
在浮动div中保持项居中的问题
提问于 2017-07-11 18:28:15
我一直在做一个项目，通过各种方法，我已经设法让文本小心地坐在我正在使用的平台上的图像旁边。图像和文本都居中，但文本左对齐。
页面应该是响应性的，并且通常运行良好，但是随着浏览器大小的缩小，文本最终会被推到下一行，就像应该的那样。不幸的是，当这种情况发生时，它不再居中，图像变得偏离中心。
我已经被困了一段时间，试图弄清楚在我目前的主题/用例中到底有什么可以修复的--我希望有任何建议。https://jsfiddle.net/xLwy83rj/
<div style="width: 50%; margin: 0 auto; min-width: 250px;">
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text -->
<img style="float: left; margin-right: 1rem; margin-top: 15px; margin-bottom: 15px;" src="http://via.placeholder.com/128x128" />
</div>
<div style="display: inline-block; width: 200px;">
<p style="text-align: left;"><strong>Attack Gloves</strong><br />
Base DPS: ~<strong>572.5</strong><br />
Attack Range: <strong>1100</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong></p>具体来说，目标是让两个主要元素始终居中，中间只有一点空间。如果浏览器太小而无法并排显示它们，它会将文本向下推，并保持所有内容居中不动。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-11 18:35:14
.main {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.p{
margin: 0;
}<div class="main">
<div class="top">
<img class="alignnone second" src="http://via.placeholder.com/128x128" />
</div>
<div class="third">
<p class="p"><strong>Attack Gloves</strong><br />
Base DPS: ~<strong>572.5</strong><br />
Attack Range: <strong>1100</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong></p>
</div>
</div>
Stack Overflow用户
发布于 2017-07-11 18:36:27
尝试此HTML
HTML
<div style="text-align:center;width:50%;margin:auto;">
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text -->
<img class="alignnone" src="http://via.placeholder.com/128x128" style="display:inline-block;" />
<p style="display:inline-block;"><strong>Attack Gloves</strong><br />
Base DPS: ~<strong>572.5</strong><br />
Attack Range: <strong>1100</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong></p>
</div>稍微改变了一下
Stack Overflow用户
发布于 2017-07-11 18:37:03
<div style="width: 50%; margin: 0 auto; min-width: 250px; text-align:center; float:left;">
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text -->
<img class="alignnone" style="display:inline-blcok; margin-right: 1rem; margin-top: 15px; margin-bottom: 15px;" src="http://via.placeholder.com/128x128" />
</div>
<div style="display: inline-block; width: 200px; float:left;">
<p style="text-align: left;"><strong>Attack Gloves</strong><br />
Base DPS: ~<strong>572.5</strong><br />
Attack Range: <strong>1100</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong><br />
Heat Buildup: <strong>95</strong></p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45031939
复制相关文章
相似问题
腾讯云开发者
