ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose を使用して div のスパンの水平方向のセンタリングを実現する方法
css_html/css_WEB-ITnose を使用して div のスパンの水平方向のセンタリングを実現する方法
- WBOYオリジナル
- 2016-06-24 11:29:462322ブラウズ
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 までご連絡ください。