Question

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

我正在使用一些我不是很熟练的东西，CSS。我想将一个由图像组成的框中心，旁边有一段文字（两行文字 - 不再是），文字对齐到图像的左边。

| ------------------------------------ NOW --------- --------------------------- |

|img|BIG TITLE
|img|smaller subtext

| -----------------------------＆lt; - CENTERED ----＆gt; ----------------------------- |

                   |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并尝试居中，但我不知道它的宽度
用Google搜索并搜索解决方案......

没有任何作用，我无法居中，请帮忙： - ）

提前致谢

Answer 1

你可以浮动并相对定位容器，如下所示：

.container {
    overflow: hidden;
}

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

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

如果容器div中的内容多于此居中位，则可以将居中位包装在另一个div中，并将overflow：hidden规则移出.container并转移到该div。

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

1 个答案: