
よろしくお願いします。
まず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を探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onmouseoverで文章を入れ替える
-
table で画像をピッタリとくっ...
-
画像を隙間なく配置する方法
-
画像を横に並べるには
-
c言語を用いて画像の透明度をあ...
-
HTMLタグのDL DT DDを使ってli...
-
Safariの場合HTMLの内容を変更
-
htmlの文字が縦書きになる
-
html/cssの、navを2段にする...
-
CSSで改行後の行間調整
-
div要素が重なってします
-
ulタグやliタグの中でbrタグ...
-
html の divとtable の役割
-
既婚男女の方、結婚前と結婚後...
-
スクロールバーの色 ぷっくりと
-
スペースを使わず文字位置を揃...
-
idの中のid指定
-
【CSS】ヘッダーの高さが不明の...
-
ブログのサイドバーが下にくる
-
CSSファイルを使用せず、HTMLの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
XML画像データををHTMLで簡単に...
-
inputタグでサーバにデータを送...
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の横に文字をうまく配置で...
-
機種依存文字、m2(平方メート...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
HTMLのIMAGEに。。
-
画像をクリックして元に戻すには
-
javaをつかってテキストと画像...
-
IE7だけに出る謎の空白(CSS)...
-
HTMLでボタンを横に2つ並べる方法
-
IEでの”a img”の枠線について
-
ワードプレス max-width100%が...
-
画像の一部を選択した時のみマ...
-
画像をクリックして同じページ...
-
cssヘッダー画像の下に配置した...
-
アップロードするとレイアウト...
おすすめ情報