0

iWeb を使用して開発した Web サイトを持っています。この Web サイトでは、任意のオブジェクトをどこにでもドラッグして、非常に優れた Web サイトを作成できます。ただし、データベースを必要とする Web サイトではうまく機能しません。このため、Ruby on Rails 3.2.3、CSS3、Bootstrap 2.0 などを使用して Web サイトを書き直しています。

ここに私が書き直しているウェブサイトへのリンクがあります。 http://www.iktusnetlive.com/Home.html

ヘッダーに黄色の LIVE が表示された青色のカメラがある部分を再現しようとしています。カメラのレンズがある場所にテキストを並べたい。グラフィックは60X55です。line-height、padding-top、およびその他の CSS オプションで数時間遊んでみましたが、テキストを下に移動できませんでした。

カメラのレンズと並べたいグラフィックとテキストを含む HTML コードを次に示します。

<p class="align-center"><span id="camera-text"><span id="text-bold"><%= image_tag("live_transparent.png", alt: "iktusNETlive") %>&nbsp;&nbsp;To view FREE LIVE STREAMING VIDEO, you will need to create a FREE ACCOUNT and be logged in.</span></span></p>

ここに私のCSSコードがあります:

#camera-text {font-size: 15px; vertical-align: middle; color: @red;}

.align-center { text-align: center; }

#text-bold { font-weight: bold; }

これは私ができることなのだろうか。ご覧のとおり、ページの背景としてグラデーションがあります。Bootstrap、CSS3、または HTML5 を使用してこれが可能かどうかはわかりません。昔はテーブルを作成し、HTML5 では使用できなくなったセルのパディングやその他のオプションを使用していたでしょう。

どんな助けでも大歓迎です。

4

1 に答える 1

0

通常、次のように CSS でブロック レベルのアイテムを中央に配置できます。

.some-class {
    display: block; /* needed if you'd like to center an inline element */
    margin: 0 auto;
}

左右のマージンを auto に設定するとうまくいきます。

絶対配置を試してください本当に具体的にする必要がある場合:

基本的な Web サイトを構築している場合、Ruby on Rails と Twitter Bootstrap はやり過ぎであり、事態を複雑にするだけです。慣れてきたら、WordPress を試してみてください。

于 2012-05-18T22:51:10.020 に答える