1. ホーム
  2. html

[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について

2022-02-08 12:03:18

質問

このようにbootstrapのカラムの中にいくつかの画像を入れています。

<div class="services">
    <div class="container">     
        <div class="row">

            <div class="col-md-3 services-section">
                <img src="/images/website_design_icon.png"/>
                    <div class="services-paragraph">
                    <h3>Website Design</h3>
                    <p>WordPress themes built for design and functionality</p>
                    </div>
            </div>

            <div class="col-md-3 services-section">
                <img src="/images/graphic_design_icon.png"/>
                    <div class="services-paragraph">
                    <h3>Graphic Design</h3>
                    <p>Logo designs for identity and print</p>
                </div>
            </div>

            <div class="col-md-3 services-section">
                <img src="/images/search_engine_marketing_icon.png"/>
                    <div class="services-paragraph">
                    <h3>Search Engine Marketing</h3>
                    <p>SEO strategies and PPC solutions to increase your presence online</p>
                </div>
            </div>

            <div class="col-md-3 services-section">
                <img src="/images/wordpress_conversion_icon.png"/>
                    <div class="services-paragraph">
                    <h3>WordPress Conversion</h3>
                    <p>Take advantage of the number-one CMS in Web Design to liberate your business</p>
                    </div>
            </div>

        </div><!--/Row-->
    </div><!--/Container-->
    </div><!--/Services--> 

ご覧の通り、各カラムには、クラス services-section . 私は .services-section img をCSSに記述すると、このようになります。

CSSを使用します。

.services-section img {
text-align: center;
width: 90px;
height: 90px;
} 

そして、このクラスに様々なスタイルを追加してみたところ -。 float:none; , margin:auto; , vertical-align:middle; - どれも効果がありません。また、画像にクラスを与えてみました。 .middle を実行し

.middle {
text-align: center;
}

CSSの中ですが、これも効果がありませんでした。

を使うのはやめよう。 margin-left: 30px; しかし、画像を列の中心に向かって押し出すための他の方法を知りません。他の提案に感謝します。サイトはここでライブです。

http://nowordpress.gatewaywebdesign.com/

解決方法は?

追加 display: blockmargin: auto; を実行します。

.services-section img {
    width: 90px;
    height: 90px;
    margin: auto;    
    display: block;
}