css水平居中怎么设置

青灯夜游
Freigeben: 2023-01-04 09:34:22
Original
5714 Leute haben es durchsucht

css设置水平居中的方法:1、使用“text-align: center;”样式,可对块级元素(父元素)中的行内元素进行水平居中;2、使用“margin: 0 auto;”样式,可对块级元素(父元素)中具有固定宽度的块级元素进行水平居中。

css水平居中怎么设置

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法1:使用text-align属性

直接给父元素设置text-align: center;样式,可以将块级元素(父元素)中的行内元素进行水平居中

     
我是测试文本!
Nach dem Login kopieren

效果图:

1.png

说明:

该种方法仅对文字、图片、按钮等行内元素有效(display属性设置为inlineinline-block的)进行水平居中

(学习视频分享:css视频教程

方法2:使用margin属性

给需要居中的子元素设置margin: 0 auto;样式,可以将块级元素(父元素)中具有固定宽度的块级元素进行水平居中。

     
我是块级元素
Nach dem Login kopieren

效果图:

2.png

说明:

该方法仅能水平居中,且对浮动元素定位无效。

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt voncss水平居中怎么设置. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!