よろしくお願いします。
まずhtmlに以下の記述をしております。
<p class="font">
スタイルシート
<span class="color2">レッスンブック</span>
パソコン
<img src="img/hoge.gif" alt="テスト" width="250" height="130" />
インターネット
プリンター
</p>
レッスンブックについてのみ文字色を変えたいため<span>を使用しております。
<p class="font">~</p>にはtext-align:leftを;適用しており
当然ですが、左に寄ります。
ですが一部の文字や画像のみを中央揃えにしたいのですが、きっとclass名を入れれば良いのだと思うのですが、具体的にどこに記述したら良いのか分かりません。
上記のimgと「レッスンブックのみを中央揃えにしたいと思っております。
ご指導よろしくお願いします。
No.3ベストアンサー
- 回答日時:
う~~ん。
もしかして、↓こういうことかな。
<div class="font">
<p>スタイルシート</p>
<p class="color2">レッスンブック</p>
<p>パソコン</p>
<p><img src="img/hoge.gif" alt="テスト" width="250" height="130" /></p>
<p>インターネット</p>
<p>プリンター</p>
</div>
▽スタイルシート
.color2に以下スタイルを追加
.color2 {
text-align:center; /* この1行を追加 */
}
もし、.color2を他の場所でも使っているようなら、
限定的に使用します。
.font .color2 {
text-align:center; /* この1行を追加 */
}
<p>タグは段落ですから、通常は上下に余白が発生します。
これがイヤなら、
.font p {
margin:0;
}
で大丈夫かな。
borderとpadding、widthとpaddingを同スタイル内で使用すると、
ブラウザごとの表示に違いが出るので、オススメしませんよ。
No.2
- 回答日時:
ちょっと目的のものがよくわかりません。
<p class="font"></p>の中身には<br />等が無いので
スタイルシートからプリンターまではすべて横並びになるはずですが、
一部だけ中央揃えというのはどういう事でしょう?
全体を<pre></pre>で囲んでいるのでしょうか?
ちなみにspanはインライン要素なので、ボックスがテキストや画像の幅と同じになります。
なのでそのボックスの中にtext-align:center;を指定しても効きません。(text-alignは記述したボックスの中身に対する指定)
spanにtext-alignを効かせたい場合は一緒にdisplay:block;を指定して、spanをブロックレベル要素にしてやると出来ます。
No.1
- 回答日時:
一部分だけなら、クラス作らなくても、style属性で指定すれば..
<span class="color2" style="text-align:left;">レッスンブック</span>
パソコン
<span style="position:absolute;left:50%;">
<img src="img/hoge.gif" alt="テスト" width="250" height="130" />
</span>
インターネット
この回答への補足
ありがとう御座います。
実行してみたのですが、
<span class="color2" style="text-align:center;">レッスンブック</span>で中央に寄りません。
また、<span style="position:absolute;left:50%;">
<img src="img/hoge.gif" alt="テスト" width="250" height="130" />
</span>を実行してみたところ、上記は全て枠で囲んであり、その枠から画像が出てしまいました。
お手数ですが再度ご指導頂けませんでしょうか?
<p class="font">に記述しているcssは以下の通りで御座います。
.font{
text-align: left;
width: 750px;
padding: 20px;
border-top: 2px solid #191970;
border-right: 2px solid #191970;
border-bottom: 2px solid #191970;
border-left: 2px solid #191970;
margin-left: 0;
margin-right: 10;
background-color: #ffff00;
font-weight: bolder;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像をクリックして元に戻すには
-
table で画像をピッタリとくっ...
-
スタイルシート 文字と写真の...
-
CSSの左横に隙間ができてしまい...
-
アップロードするとレイアウト...
-
リンクを知らせる手のマークが...
-
背景画像が透けて見えるボタン...
-
FC2カートのテンプレートでの商...
-
クリッカブルマップがきかない!?
-
WordPressで画像に枠が入ってし...
-
cssで画像を均等に配置する方法...
-
cssで、imgタグに、背景画像を...
-
CSSでの背景の指定について教え...
-
機種依存文字、m2(平方メート...
-
リンク画像のラインを消したい
-
下記が私のHPのタグなのですが
-
<img src=** border=0>の一括指定
-
htmlの文字が縦書きになる
-
1時間30分を簡単に表したいで...
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
画像の場合のみ、下線を消す方...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
table で画像をピッタリとくっ...
-
機種依存文字、m2(平方メート...
-
画像をクリックして元に戻すには
-
footerの背景が切れて、背景画...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
HTMLの文章中の画像のベースラ...
-
画像サイズの変更の仕方を教え...
-
3つの画像を中央に寄せて表示さ...
-
ホームページで画像を横に並べ...
-
cssで一部の文字や画像を中央に...
-
cssで、チェックボックスの画像...
-
favicon.ico はもういらない?
-
チェックボックスの影
-
背景画像が透けて見えるボタン...
おすすめ情報