ホームページ画像を中心に持ってきたい。

Question

ホームページの画像を中心に持っていきたいです。
プログラマの方に依頼して、ページを作成していただきました。
大変素早く作っていただき、感謝しております。

基本的なコードしか知らないので、こちらは作っていただいたのをいじるぐらいです。
画像を align centerに設定しても動きません。

FTPサーバー経由でなんどもチャレンジしたのですが・・・
失敗に終わっております。

参考までにご覧ください、レジュメの代行サービスページです。
hightouch1.tokyo

一部コードを記載します。
よろしくお願いします。

<h1 class="center"> サンプル </h1> 
												<div class="textcenter"><img align="left" src="images/IMG_4708.JPG" alt="SAMPLE2"　height="400px" width="300px" align="center"></div>	
												<div class="textcenter"><img  align="rigtht" src="images/IMG_4709.JPG" alt="SAMPLE1"  height="390px" width="300px" align="center"></div> <br clear="both">	
		                                 <p class="p_no_margin"><i class="fa fa-hand-o-right" aria-hidden="true"></i>レジュメのページ数は原則１枚です。職務歴が長い場合、ページ数が2枚でも許されています。</p>
		                                 <p class="p_no_margin"><i class="fa fa-hand-o-right" aria-hidden="true"></i>弊社はRSSフィードに登録をして、レジュメのアドバイスを採集しています。</p>

   															<div class="textcenter"><img align="left" src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" align="center"></div>
   															<div class="textcenter"><img align="right"src="images/IMG_3294.PNG"  style="float:left" alt="toeic" height="250px" width="200px" align="center"></div> <br clear="both">
   															</ul>					

こちらも同じく真ん中に表示させたいです。

FireFoxをお持ちのお方は、Firebugなどをみてお調べくださいませ。
お手数ですが、どうぞよろしくお願いします。

Answer 1

「motuo」さんの回答の様に<div class="textcenter">の部分にCSSが存在しない様に思います。実際は記載されていても、質問者さんがイジった際に、誤った記述により、適用されていない可能性が高いので、ご確認ください。

また、単純にそこだけ現状で適用したいのであれば、

<div class="textcenter">

　↓

<div style="text-align:center">

ではどうでしょうか？

-追記-
先程気付きましたが、「textcenter」と「text-center」は違うクラスです。ご確認ください。

Comments

[tomo39-.]

「motuo」さんからいただいた内容で、確かに、textcenterというclassが上手く当たっていないようでした。しかし、yoshinaviさんからの回答で、<div style> で classなしにスタイルを当てれることが非常にわかりやすく、単純に「現状」だけを直したい場合にすごく活用できると思いましたので、ベストアンサーに選ばせていただきました。
「motuo」さん、ラインの仕分け、divで要素を一つにまとめる方法をご教授いただき、ありがとうございました。

[yoshinavi]

解決されて何よりです。
「textcenter」と「text-center」のクラス名記述違い等は、私もイジる際によくある失敗例で、「何故CSSが効かないんだ？」と焦れば焦るほど見落として気が付かない場合が多々あります。
仕様を見直す際に各コードがシンプルなほど見易くなりますので、大変でしょうが、頑張ってください。
(^^)

[tomo39-.]

ありがとうございました。大変助かりました。
似たようなコードが重複してたり、時にはスペースがあるかないかでも、
スタイルが効かないときがあるんですね。勉強になりました。

英語でもＩを使いすぎた論文は減点の対象になったりすることもあるほどに。
言語の勉強とは奥行きが深いものですね・・・。

次回、こちらで何かお手伝いできる機会であれば、何なりとお知らせください！

Answer 2

左右センターと読み取りました。

<div class="textcenter">
  <img  src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" >
</div>
<div class="textcenter">
  <img src="images/IMG_3294.PNG"  style="float:left" alt="toeic" height="250px" width="200px" >
</div>

掲示されたコードにはimgタグの中にalign="left"とalign="center"が混在していました。
親のdivのtextcenterクラスにtext-align:centerが効いているのであれば、align属性を削除するだけでセンターになるはずです。
そもそも、imgのalign属性はhtml5で廃止されているので、使わないようにしましょう。

Comments

[tomo39-.]

align属性を削除しても、centerになりませんでした。
CSSのスタイルシートでは、textcenterなっているため、左右センターです。

コードです。

<ul>
<div class="textcenter"><img src="images/1040900641.jpg" alt="toeic" height="100px" width="250px" ></div>

<div class="textcenter"><img src="images/IMG_3294.PNG" style="float:left" alt="toeic" height="250px" width="200px" >

</div> <br clear="both"> </ul>

Answer 3

若干のエスパー回答+未検証になりますが、ご容赦ください。
拝見したホームページでは、textcenterというclassが上手く当たっていないです。
なので、CSSに下記を追加してみてください。

.textcenter{
    text-align:center;
}

あとは、

        <div class="textcenter">
            <img align="left" src="images/01.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>
        <div class="textcenter">
            <img align="left" src="images/02.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>

となっているのを、1つのdiv要素にまとめてみましょう。

        <div class="textcenter">
            <img align="left" src="images/01.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
            <img align="left" src="images/02.png" alt="SAMPLE2" style="height: 400px;width: 300px;">
        </div>

追記

質問者さんのご要望に沿うかどうかは分かりませんが、こんな感じで真ん中にそろえる事が出来ます。

Comments

[tomo39-.]

今から試してみます。ありがとうございます。

[tomo39-.]

CSSスタイルシートには、

.text-center {
text-align: center
}　

は記載されているようでした。

[tomo39-.]

imgを読み込む時のファイル名が、こちらの画像と紐付けされておらず表示できませんでした。いただいたコードのコピペではできません。。。

[tomo39-.]

試しましたが、無理でした。やはりpaddingとmarginで中心に揃えたくありません。
もうしこし、imgコードの内のインラインCSSスタイル、について調べたいと思います。

Answer 4

試しにimgの親のdivに幅を持たせてはどうですか？
提示されている部分が少ないのでこれができるかどうかですが…

.textcenter{
    width:500px;
}

それか左右のmarginをautoにします

.textcenter{
    margin-left:auto;
    margin-right:auto;
}

Comments

[tomo39-.]

ご返信いただきありがとうございました、
ＣＳＳの編集はあまりすすんでしたくないのですが、、
ほかのパーツも同じく真ん中に来てしまいたくないので。

できればインラインでＨＴＭＬファイル（この場合ＰＨＰなのですが）より、
画像部分のパーツのみを編集したいです。

[sousuke]

他の方もおっしゃっていますがtextcenterクラスに対してがcssが当たっているように見えません。

[tomo39-.]

わかりました。CSSを当ててみたいと思います。