The following editor will bring you a brief discussion on the issue of horizontal centering of CSS processing. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Come and have a look with the editor, I wish you all a happy game
1. Horizontal centering setting-inline elements
Set 1 text-align:center through the parent element ; , center the content of the parent element
2. Horizontal centering setting-fixed-width block element
The width width of the block element is a fixed value, by setting " The left and right margin" value is "auto" to achieve centering
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
p{
width: 200px;/*固定的宽度*/
margin: 20px auto;/*左右margin设置为auto*/
border: 1px solid red;
}
</style>
</head>
<body>
<p>我是定宽块状元素，我要水平居中显示。</p>
</body>
</html>
3. Horizontal centering setting - variable width block element
Method 1. Add table tag
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:0 auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>
<p class="wrap">
我要水平居中
</p>
</td></tr>
</tbody>
</table>
</body>
</html>
Method 2. Set display:inline; method, similar to the first method, set the display type to inline elements, and perform variable width elements Attribute setting
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>
</head>
<body>
<p class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</p>
</body>
</html>
Method 3. Set position:relative and left:50% to use relative positioning method, offset the element by 50% to the left, that is, to achieve the purpose of centering
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
/*下面是代码任务区*/
.wrap{
clear:both;
float:left;
position:relative;
left:50%
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
</style>
</head>
<body>
<!--下面是代码任务区-->
<p class="wrap">
<p class="wrap-center">我们来学习一下这种方法。</p>
</p>
</body>
</html>
The above article briefly talks about CSS processing horizontal centering The question is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.
For more articles on the centering of CSS processing levels, please pay attention to the PHP Chinese website!
All About mailto: LinksApr 22, 2025 am 11:04 AMYou can make a garden variety anchor link () open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything
It's pretty cool how Netlify CMS works with any flat file site generatorApr 22, 2025 am 11:03 AMLittle confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I'll try that someday when I'm exploring CMSs for a new project. Then
Edge Goes Chromium: What Does it Mean for Front-End Developers?Apr 22, 2025 am 10:58 AMIn December 2018, Microsoft announced that Edge would adopt Chromium, the open source project that powers Google Chrome. Many within the industry reacted with
A Gutenburg-Powered NewsletterApr 22, 2025 am 10:57 AMI like Gutenberg, the new WordPress editor. I'm not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to
Using for Menus and Dialogs is an Interesting IdeaApr 22, 2025 am 10:56 AMUsing for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "
Automated Visual Regression Testing With PlaywrightApr 22, 2025 am 10:54 AMWith visual regression testing, we can update a page, take screenshots before and after the fact, and compare the results for unintended changes. In this article, learn how to set up visual regression testing using Playwright.
CSS Houdini Could Change the Way We Write and Manage CSSApr 22, 2025 am 10:45 AMCSS Houdini may be the most exciting development in CSS. Houdini is comprised of a number of separate APIs, each shipping to browsers separately, and some
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
