3

ここでの最初の質問ですが、他の人の解決策を読んであらゆる分野で多くの問題を解決しましたが、今回は運が悪く、グーグルを試し続けています。

私はあまり熟練していないCSSで作業しています。画像で作成されたボックスを中央に配置し、その横にテキストの段落を配置したい(2 行のテキスト - これ以上)場合、テキストは画像の左側に配置されます。

|------------------------------------ 今 ------------ ------------------------|

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

それから私は試しました：

  • すべてを段落に入れ、テキストを揃えます: センター;
  • 段落に Margin 0px auto を設定します。
  • すべてをdivに入れてセンタリングしようとしましたが、幅がわかりません
  • ここで解決策をグーグルで検索しました...

何も機能しません。ブロックを中央に配置できません。助けてください:-)

前もって感謝します

4

1 に答える 1

2

次のようにコンテナを浮かせて相対的に配置できます。

.container {
    overflow: hidden;
}

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

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

コンテナー div にこの中央揃えビット以外のコンテンツがある場合は、中央揃えビットを別の div でラップし、overflow: hidden ルールを .container からその div に移動することができます。

于 2012-09-21T23:08:16.103 に答える