css_html/css_WEB-ITnose を使用して div のスパンの水平方向のセンタリングを実現する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css_html/css_WEB-ITnose を使用して div のスパンの水平方向のセンタリングを実現する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:29 AM

CSS を使用して div 内のスパンの水平方向の中央揃えを実現する方法:
この章では、div 内でスパンを水平方向の中央揃えに設定する方法を紹介します。この効果を実現する方法を紹介するコード例を次に示します。
多くの友人は、span 要素に margin:0px auto を適用すると、span 要素を水平方向に中央揃えにできると考えているかもしれません。実際には、span はインライン要素であり、この方法では中央揃えの効果を実現できないため、これは間違いです。

<!DOCTYPE html>     <html>     <head>     <meta charset=" utf-8">     <meta name="author" content="http://www.softwhy.com/" />     <title>蚂蚁部落</title> <style type="text/css">.box{  width:200px;  height:100px;  background:green;}span{  background:red;  margin:0px auto;}</style></head><body><div class="box">  <span>蚂蚁部落</span></div></body></html>

ログイン後にコピー

上記のコードは、span 要素のセンタリング効果を実現できません。コードの変更は次のとおりです。

<!DOCTYPE html>     <html>     <head>     <meta charset=" utf-8">     <meta name="author" content="http://www.softwhy.com/" />     <title>蚂蚁部落</title> <style type="text/css">.box{  width:200px;  height:100px;  background:green;  text-align:center;}span{  background:red;}</style></head><body><div class="box">  <span>蚂蚁部落</span></div></body></html>

ログイン後にコピー

上記のコードは、要件を達成するために text-align:center を使用するだけです。 , これはspanがインライン要素だからです。

詳細については、http://www.softwhy.com/divcss/

を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7675

CakePHP チュートリアル

1393

C# チュートリアル

1207

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。