由段落旁边的图像组成的居中块

Posted 2023-03-05

【中文标题】由段落旁边的图像组成的居中块

【英文标题】：centering block made of an image next to a paragraph

【发布时间】：2012-09-14 09:04:11

【问题描述】：

这是我在这里的第一个问题，虽然我在阅读其他解决方案的任何领域都解决了许多问题，但这次我没有运气，我一直在尝试和谷歌搜索。

我正在处理一些我不太熟练的东西，CSS。我想将一个由图像组成的框居中，旁边有一段文本（两行文本 - 不再有），文本与图像的左侧对齐。

|------------------------------------ 现在 --------- ---------------------------|

|img|BIG TITLE
|img|smaller subtext

|-------------- -------- ----------|

                   |img|BIG TITLE
                   |img|smaller subtext

我尝试将所有内容都放在一个 div 中，但是由于 DIV 的宽度取决于文本的长度，并且它会根据页面的标题而变化，所以我无法设置固定宽度。

这是我的 html：

<div class="container">

<div class="row">
    <div class="header">
        <p class="small">
<img class="ok" src="ok.png">
<span class="bigtitle">TITLE</span>
<br><span style="text-align:left">subtext</span></p>
</div>
</div>

这是我的 CSS：

.row .header 
width: 100%;


img.ok 
top: 15px;


p.small 
color: #000000;
font: bold 12px arial,helvetica,sanserif;
display: block;


span.bigtitle 
color: #679819;
text-transform:uppercase;
font: bold 42px arial,helvetica,sanserif;



    text-align: center;

然后我尝试了：

将所有内容放在一个段落中并 text-align: center; 为段落设置 Margin 0px auto； 将所有内容放在一个 div 中并尝试居中，但我不知道它的宽度 在此处搜索并搜索解决方案...

没有任何效果，我无法将块居中，请帮助 :-)

提前致谢

【参考方案1】：

您可以像这样浮动和相对定位容器：

.container 
    overflow: hidden;


.row  
    position: relative;
    left: 50%;
    float: left;    


.header 
    position: relative;
    left: -50%;
    float: left;    
 

如果容器 div 中的内容多于这个居中位，则可以将居中位包装在另一个 div 中并将溢出：隐藏规则移出 .container 并移至该 div。

【讨论】：

感谢它真的有帮助！唯一的问题是潜台词也会居中！！但是现在其余的都居中，我更容易解决这个问题！非常感谢您的快速回复