VWSとは フォーラム Lightning [ 解決済 ] 横並びの画像をセンター揃えにしたい

[ 解決済 ] 横並びの画像をセンター揃えにしたい

このトピックには5件の返信が含まれ、2人の参加者がいます。7 ヶ月前 yunahana さんが最後の更新を行いました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #15379

    yunahana
    参加者

    いつもお世話になっております。

    Lightning Pro Fort でサイトを作成しております。
    下記の様に記述して画像を横並びにしています。
    項目1には画像3枚、項目2には画像2枚を並べていますが、左揃えになっています。
    並べた画像をセンター揃えにするにはどうしたらよいでしょうか?
    <div align=”center”>と</div>で囲ってみましたが、センター揃えになってくれません‥
    その他色々試してみましたが、画像が縦に並んでしまったりと上手くいきませんでした‥

    どなたかご教授お願いいたしますm(_ _)m

    <h3>項目1</h3>
    <div class=”row”>
    <div class=”col-sm-4″><a href=”/https://aaaaa.com/”><img class=”alignnone size-full wp-image-4718″ src=”/image/画像1.png” /></a></div>
    <div class=”col-sm-4″><a href=”/https://bbbbb.com/”><img class=”alignnone size-full wp-image-4719″ src=”/image/画像2.png” /></a></div>
    <div class=”col-sm-4″><a href=”/https://ccccc.com/”><img class=”alignnone size-full wp-image-4720″ src=”/image/画像3.png” /></a></div>
    </div>
    <h3>項目2</h3>
    <div class=”row”>
    <div class=”col-sm-4″><a href=”/https://ddddd.com/”><img class=”alignnone size-full wp-image-4721″ src=”/image/画像4.png” /></a></div>
    <div class=”col-sm-4″><a href=”/https://eeeee.com/”><img class=”alignnone size-full wp-image-4722″ src=”/image/画像5.png” /></a></div>
    </div>

    • このトピックは yunahanaが7 ヶ月、 1 週前に変更しました。
    • このトピックは7 ヶ月、 1 週前に  yunahana さんが編集しました。理由: タグが上手く表示されなかった為
    #15393

    kurudrive
    キーマスター

    こうですか?

    <h3>項目1</h3>
    <div class="row">
    <div class="col-sm-4 text-center"><a href="https://aaaaa.com/"><img class="alignnone size-full wp-image-4718" src="画像.jpg" /></a></div>
    <div class="col-sm-4 text-center"><a href="https://bbbbb.com/"><img class="alignnone size-full wp-image-4719" src="画像.jpg" /></a></div>
    <div class="col-sm-4 text-center"><a href="https://ccccc.com/"><img class="alignnone size-full wp-image-4720" src="画像.jpg" /></a></div>
    </div>
    #15415

    yunahana
    参加者

    kurudrive 様

    いつもありがとうございます。

    教えて頂いたソースで一段目の画像はセンター揃えになりました。
    ありがとうございます。

    「項目1」は画像が3枚で、「項目2」は画像が2枚でその画像も「項目1」に合わせてセンター揃えにしたいのですが、
    div class=”col-sm-6″だと画像が大きくなってしまい、div class=”col-sm-4″にすると大きさは左揃えになってしまいました。

    添付画像の様にしたいのですが、何か方法はございませんでしょうか?
    お手数をおかけいたしますが、よろしくお願いいたします。
    https://drive.google.com/drive/u/0/my-drive?gsessionid=Db9zH7Q0U9vkpFg9fBNONg

    • この返信は7 ヶ月前に  yunahana さんが編集しました。
    • この返信は7 ヶ月前に  yunahana さんが編集しました。
    #15419

    yunahana
    参加者

    画像URLが間違っておりました。
    下記で確認お願いいたします。
    https://www.dropbox.com/s/1toxbvfci8edvr9/sample8.jpg?dl=0

    #15431

    kurudrive
    キーマスター

    若干邪道な気もしますがこんな感じなら(汗

    <h3>項目1</h3>
    <div class="row">
    <div class="col-sm-4 text-center"><a href="https://aaaaa.com/"><img class="alignnone size-full wp-image-4718" src="画像.jpg" /></a></div>
    <div class="col-sm-4 text-center"><a href="https://bbbbb.com/"><img class="alignnone size-full wp-image-4719" src="画像.jpg" /></a></div>
    <div class="col-sm-4 text-center"><a href="https://ccccc.com/"><img class="alignnone size-full wp-image-4720" src="画像.jpg" /></a></div>
    </div>
    <h3>項目2</h3>
    <div class="row">
    <div class="col-sm-4  col-sm-offset-2 text-center"><a href="https://aaaaa.com/"><img class="alignnone size-full wp-image-4718" src="画像.jpg" /></a></div>
    <div class="col-sm-4 text-center"><a href="https://bbbbb.com/"><img class="alignnone size-full wp-image-4719" src="画像.jpg" /></a></div>
    </div>
    #15435

    yunahana
    参加者

    kurudrive 様

    いつもありがとうございます。
    ご教授いただいたソースで、上手くいきました。

    お手数をおかけいたしました。
    感謝いたします。
    本当にありがとうございました!

    • この返信は7 ヶ月前に  yunahana さんが編集しました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)

このトピックに返信するにはログインが必要です。