Home > Article > Web Front-end > How to achieve centering effect in html web pages (code sharing)
How to achieve centering effect in html web pages (code sharing)
- 奋力向前Original
- 2021-08-11 17:34:57101641browse
In the previous article "It is worth knowing the basic structure of html web pages during study (summary)", I introduced you to a basic structure of html that is very clear. With this, I guarantee that you will not incoherent. The next article below will share with you how to achieve the centering effect in HTML web pages. Friends in need can refer to it.
html Centered elements can be classified as [inline] - [block] - [inline block]
Commonly used block elements: <div> <p> </p>
<h1>.....<h6> <ol> </ol>
<ul> <dl> <table> <address> </address>
<form>
<p>Commonly used inline elements: <code><a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var></var>
Commonly used inline block elements:<img alt="How to achieve centering effect in html web pages (code sharing)" > <input>
Block-level element specification: Using text-align: center is invalid.
If you need to set the center, set the margin value on the left and right sides to "auto".
So the remaining areas of the elements on the left and right sides are equally divided, that is, the areas on both sides of the element each account for 50%, then the element is centered on the left and right.
Block-level elements with variable width
There are usually three ways to achieve centering
1. Through the table element Implementation;
2. Set display: inline method to set the display type to inline elements;
3. Set position:relativeUse relative Positioning method, offset the element 50% to the left to achieve centering.
##Tag to center the title
<p align="center">关关和鸣的雎鸠，栖息在河中的小洲</p>
Code effect
How to center the img image
Generally speaking, you can use "text-align:center# in CSS ## attribute, margin:0 auto or positioning attribute" can be centered. img defines a parent tag, so that the content in this parent tag is centered, then img will naturally be centered
<p align="center">img……</p>
How to center the input input box
style="text-align:center; "
<div align="center">
<input value="帐号"size="20">
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页制作</title>
<style>
*{padding: 0;margin: 0;}
.news{width: 1080px;height: 200px;margin: 0 auto;}
.left_1{width: 200px;height: 150px;float: left;padding: 10px;}
.left_2{width: 200px;height: 150px;float: left;margin-top: 10px;}
.center{width: 200px;height: 150px;float: left;padding: 10px;}
.right_1{width: 200px;height: 150px;float: left;margin-top: 10px;}
.right_2{width: 200px;height: 150px;float: left;padding: 10px;}
a{ display: block; text-align: center;}
a:hover{color:#00FF00;text-decoration: underline;}
input.text{text-align:center;padding:10px 20px;width:300px;}
</style>
</head>
<body>
<style type="text/css">
.mydiv{
width:100%;
height:500px;
text-align:center;
}
</style>
<div style="width:960px; margin:0 auto; height:auto:">
<p style="text-align:center;"><img src="487.jpg" / alt="How to achieve centering effect in html web pages (code sharing)" ></p>
</div>
<div class="mydiv">
<div class="reserch">
<div input style="text-align:center;"><input type="text";></div>
<button style="height:22px;width: 80px;text-align:center;">php搜一下</button>
</div>
<div class="news">
<div class="left_1">
<a href="http://www.php.cn/" target="_blank"><img src="5454.jpg" style="max-width:90%" style="max-width:90%" / alt="How to achieve centering effect in html web pages (code sharing)" ></a>
<a href="http://www.php.cn/" target="_blank">图片链接</a>
</div>
<div class="left_2">
<a href="http://www.php.cn/" target="_blank"><img src="How to achieve centering effect in html web pages (code sharing)" style="max-width:90%" style="max-width:90%" / alt="How to achieve centering effect in html web pages (code sharing)" ></a>
<a href="http://www.php.cn/" target="_blank">图片链接</a>
</div>
<div class="center">
<a href="http://www.php.cn/" target="_blank"><img src="79.jpg" style="max-width:90%" style="max-width:90%" / alt="How to achieve centering effect in html web pages (code sharing)" ></a>
<a href="http://www.php.cn/" target="_blank">图片链接</a>
</div>
<div class="right_1">
<a href="http://www.php.cn/" target="_blank"><img src="89.jpg" style="max-width:90%" style="max-width:90%" / alt="How to achieve centering effect in html web pages (code sharing)" ></a>
<a href="http://www.php.cn/" target="_blank">图片链接</a>
</div>
<div class="right_2">
<a href="http://www.php.cn/" target="_blank"><img src="877.jpg" style="max-width:90%" style="max-width:90%" / alt="How to achieve centering effect in html web pages (code sharing)" ></a>
<a href="http://www.php.cn/" target="_blank">图片链接</a>
</div>
</div>
</body>
</html>Code rendering
If you want to simply use html language, the choice is
Recommended learning:
Html video tutorialThe above is the detailed content of How to achieve centering effect in html web pages (code sharing). For more information, please follow other related articles on the PHP Chinese website!