Question

我一直致力于一个项目，并通过各种方法设法让文字仔细地坐在我正在使用的平台上的图像旁边。图像和文本都居中，但文本是左对齐的。

页面应该是响应式的，并且通常运行良好，但随着浏览器的大小缩小，最终文本将被推送到下一行，应该如此。不幸的是，当发生这种情况时，它不再居中，并且图像偏离中心。

我已经被困了一段时间试图找出我当前主题/用例中可以修复的内容 - 并且会喜欢任何建议。 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>

具体来说，目标是始终保持2个主要元素的中心位置，它们之间只有一点空间。如果浏览器太小而无法并排显示，则会将文本向下推，并使所有内容保持居中。

Answer 1

demo used flex

＆＃13;

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.p{
    margin: 0;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个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>

Link for reference

改了一下

Answer 3

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

问题保持项目以浮动div为中心

3 个答案: