ホームページ ウェブフロントエンド CSSチュートリアル list-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?

list-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?

Jun 29, 2017 am 10:20 AM
垂直 中心

list-style-imageを使用してリスト項目の前に小さなアイコンを設定すると、FFの下に正常に表示されます。 list-style-image 画像は垂直方向の中央に配置されます list-style-image を使用してリスト項目の前に小さなアイコンを設定すると、FF の下に通常表示されます

しかし、中央に配置したい場合は、 IEでは正常に表示されます、死に至るまで不服従。
次善の策は、妥協案を見つけることです。

問題を解決するために ul li の backgrou-image (背景画像) を使用することです。
以下の通り:

ul li{ 
height:28px; /*列表项的高度*/ 
line-height
:28px; /*列表项的行高,行高与高设为相同,文字垂直居中*/ 
text-indent
:15px; /*文字缩进15个像素,不然压到图表了*/ 
background-image
:url("../images/icon.gif"); /*图片的url地址*/ 
background-position
:left 45%; /*北京图片的定位*/ 
background-repeat
:no-repeat; /*禁止图片平铺,显示一个就好了*/ 
}
ログイン後にコピー

Firefox: li{background-position:left 50%)
IE: li{background-position:left 45%)

具体的な割合はぜひお試しください!

以上がlist-style-image 画像を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WPSテーブルセンタリングの設定方法 WPSテーブルセンタリングの設定方法 Mar 19, 2024 pm 09:34 PM

WPSの機能が強力になるにつれ、機能の使用に関する問題が増えてきました。 WPS では WPS テーブルをよく使用しますが、WPS テーブルを印刷する必要がある場合、テーブルを美しく見せるために、この時点でテーブルを中央に配置する必要があります。そこで問題は、WPS テーブルをどのように中央に配置するかということです。今日はここでチュートリアルを共有します。お役に立てれば幸いです。手順詳細: 1. 実際の操作で説明します 以下は、WPS テーブルを使用して作成した簡単なテーブルです。 2. 印刷プレビューを通じて、WPS テーブルがデフォルトで左側にあることがわかります。テーブルを中央に配置したい場合はどうすればよいでしょうか? 3. このとき、[ツールバー]の[ページレイアウト]をクリックする必要があります。

div を別の div の中央に配置するにはどうすればよいですか? div を別の div の中央に配置するにはどうすればよいですか? Sep 08, 2023 am 11:13 AM

はじめに div の中央揃えは、フロントエンド開発の最も重要な側面の 1 つです。この記事では、HTML と CSS を使用して、ある div を別の div の中に配置するテクニックを見ていきます。このチュートリアルでは、子 div を持つ必要がある親 div を作成します。私たちのタスクは、子 div を親 div の中央に配置することです。 Transform の変換と位置の構文を使用することは、ある div を別の div に中央揃えするあまり一般的な方法ではありません。 構文 left:50%;top:50%;Transform:translate(-50%,-50%);above この構文は次のことを行います。以下 - CSS ルール「left:50%;」により、要素の水平位置が次のように設定されます。

ハウツー: Win11 タスクバー アイコンのサイズを変更して中央揃えにする方法 ハウツー: Win11 タスクバー アイコンのサイズを変更して中央揃えにする方法 Jan 03, 2024 am 08:17 AM

Win11 では、タスク バーの変更など、まったく新しいインターフェイスが導入されました。しかし、多くのユーザーは、タスク バー アイコンが大きすぎて、使い慣れないと感じています。そのため、以下では、Win11 のタスク バー アイコンを中央に配置して変更します。 . ちょっとした操作方法を一緒に学びましょう。 win11 で中央のタスクバー アイコンを小さくする方法: 1. まず、レジストリ エディターを開く必要があります。 2. 次に、HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\ を展開します。 3. 次に、右側に「TaskbarSi」という新しい DWORD 値を作成し、追加します

HTMLでテキストボックスを中央に配置する方法 HTMLでテキストボックスを中央に配置する方法 Feb 19, 2024 pm 11:01 PM

HTML テキスト ボックスを中央揃えにする方法には、特定のコード サンプルが必要です。Web デザインでは、要素を中央揃えにすることが一般的なレイアウト要件です。 HTML テキスト ボックスの場合、中央に表示する方法がいくつかあります。以下では、一般的に使用されるセンタリング方法を詳しく紹介し、具体的なコード例を添付します。方法 1: CSS スタイル シートの centering 属性を使用する テキスト ボックスを中央揃えで表示するには、CSS スタイル シートの text-align 属性を使用します。テキスト ボックスが配置されている親コンテナ要素を中央揃えに設定します。

フロントエンドのスキル共有: CSS3 フィットコンテンツを使用して要素を水平方向に中央揃えにします フロントエンドのスキル共有: CSS3 フィットコンテンツを使用して要素を水平方向に中央揃えにします Sep 09, 2023 pm 01:36 PM

フロントエンド スキルの共有: CSS3fit-content を使用して要素を水平方向に中央揃えにする フロントエンド開発では、要素を水平方向に中央揃えにする必要がある状況によく遭遇します。この効果は、CSS3 の Fit-content プロパティを使用して簡単に実現できます。この記事では、fit-content 属性の使用方法とコード例を紹介します。 fit-content 属性は要素の親コンテナに対する相対的な長さの値であり、コンテンツの実際のサイズに基づいて要素の幅を自動的に計算できます。要素を変換すると

3 点を結ぶのに必要な水平または垂直の線分の数 3 点を結ぶのに必要な水平または垂直の線分の数 Aug 25, 2023 pm 04:49 PM

3 つの異なる点 (または座標) が与えられたとして、これら 3 つの点を接続することによって形成できる水平または垂直の線分の数を見つけたいとします。このような線分はポリラインとも呼ばれます。この問題を解決するには、計算幾何学の概念が必要です。この記事では、C++ でこの問題を解決するさまざまな方法について説明します。入力シナリオと出力シナリオでは、c1、c2、および c3 がデカルト平面上の 3 点の座標であると仮定します。この3点を結ぶ水平または垂直の線分の数は以下のようになります。入力:c1=(-1,-1)、c2=(-2,3)、c3=(4,3)出力:1入力:c1=(1,-1)、c2=(1,3)、c3 =(4,3)出力:2入力:c1=

CSS のヒント: 中央揃えのレイアウトを実装する方法 CSS のヒント: 中央揃えのレイアウトを実装する方法 Oct 20, 2023 pm 04:36 PM

CSS のヒント: 中央揃えのレイアウトを実装する方法 Web デザインでは、中央揃えのレイアウトがよく使用されます。テキスト、画像、またはページ全体のレイアウトを中央揃えにするかどうかは、すべて CSS を通じて実現できます。この記事では、中央揃えのレイアウトを実現するためのいくつかの CSS テクニックを紹介し、具体的なコード例を示します。まず、水平方向中央レイアウトを実装する方法を見てみましょう。いくつかの一般的な要素のコード例を次に示します。 Text-center 配置: .text-center{text-align:ce

CSS3 ヒント: Fit-content 属性の水平方向中央揃えの適用 CSS3 ヒント: Fit-content 属性の水平方向中央揃えの適用 Sep 08, 2023 am 08:55 AM

CSS3 のヒント: Fit-Content 属性の水平方向の中央揃えの適用 Web ページをデザインするとき、要素を水平方向の中央揃えにする必要がある状況によく遭遇します。 CSS3 では、fit-content 属性を使用して水平方向の中央揃えを実現できます。 fit-content 属性は、コンテンツに最適な要素の幅を定義し、要素内のコンテンツに基づいて要素の幅を自動的に調整します。次に、fit-content 属性を使用して水平方向の中央揃え効果を実現する方法を見てみましょう。初め、

See all articles