[解決済み] 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: block
と
margin: auto;
を実行します。
.services-section img {
width: 90px;
height: 90px;
margin: auto;
display: block;
}
関連
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] 必要なキーに一致するルートがありません。[:id]
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?