cssで一部の文字や画像を中央に寄せる方法

質問

よろしくお願いします。
まず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

CHI-512 · ベストアンサー

う～～ん。
もしかして、↓こういうことかな。

<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; /* この１行を追加 */
}

もし、.color2を他の場所でも使っているようなら、
限定的に使用します。

.font .color2 {
text-align:center; /* この１行を追加 */
}

<p>タグは段落ですから、通常は上下に余白が発生します。
これがイヤなら、

.font p {
margin:0;
}

で大丈夫かな。

borderとpadding、widthとpaddingを同スタイル内で使用すると、
ブラウザごとの表示に違いが出るので、オススメしませんよ。

回答No.2

tkmojo

ちょっと目的のものがよくわかりません。
<p class="font"></p>の中身には<br />等が無いので
スタイルシートからプリンターまではすべて横並びになるはずですが、
一部だけ中央揃えというのはどういう事でしょう？
全体を<pre></pre>で囲んでいるのでしょうか？

ちなみにspanはインライン要素なので、ボックスがテキストや画像の幅と同じになります。
なのでそのボックスの中にtext-align:center;を指定しても効きません。（text-alignは記述したボックスの中身に対する指定）
spanにtext-alignを効かせたい場合は一緒にdisplay:block;を指定して、spanをブロックレベル要素にしてやると出来ます。

回答No.1

yyr446

一部分だけなら、クラス作らなくても、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;
}