简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

css html元素居中与html元素内容居中的区别

WBOY
Release： 2016-06-01 09:53:21
Original
1878 people have browsed it

div盒子居中

div居中是对框架盒子本身设置。让网页主体水平居中于浏览器中，就需设置margin:0 auto实现布局居中。

 

CSS 内容居中

和DIV盒子居中有着同样居中字眼的内容居中，则是对盒子里内容（文字、图片等内容）实现水平居中。使用text-align:center即可实现HTML元素里的内容居中。不管是对div标签、h1标签、h2标签、p标签等html元素标签设置都能让其对于盒子里内容水平居中。

 

实例：

<code class="language-html"> 
 
 
<title>css html元素居中与html元素内容居中的区别</title> 

 
 
<div style="margin:0 auto; width:300px">码农教程</div>
<!--这里是DIV盒子相对于父级居中，盒子里面的内容并没有居中-->
<div style="text-align:center;width:300px;">码农教程</div>
<!--这样是div盒子里面的内容相对于盒子本身居中-->
 
</code>
Copy after login

在线测试

 

小结：

  • html元素居中：对框架设置水平居中（比如对DIV本身设置DIV水平居中于浏览器中）。
  • html内容居中：对盒子里的内容设置水平居中（比如DIV内放到图片、文字等内容）

Related labels：
css div center
source：php.cn
Previous article：css nth-child选中tr中的第3列td Next article：CSS before和after伪类元素应用实例及分析
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！