html - 由段落旁边的图像组成的居中 block

Question

这是我的第一个问题，虽然我在阅读其他人的解决方案时解决了任何领域的许多问题，但这次我运气不好，我继续尝试和谷歌搜索。

我正在处理一些我不太熟练的东西，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;

然后我试了:

• 将所有内容放在一个段落中并文本对齐:居中；
• 设置段落边距为0px；
• 将所有内容放在一个 div 中并尝试居中，但我不知道它的宽度
• 在此处用谷歌搜索并搜索解决方案...

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

提前致谢

Answer 1

您可以像这样 float 和相对定位容器:

.container {
    overflow: hidden;
}

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

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

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