How to achieve centering effect in html web pages (code sharing)

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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/551/855/470/1628698039773572.jpg" class="lazy" 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

<strong>  style="max-width:90%"</strong>

Input is nested outside the div, and the method of setting the inner element of the div to be centered

<strong><div align="center">
<input value="帐号"size="20">
</div></strong>

code example of how to achieve the centering effect in the html webpage

<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>




<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="/static/imghw/default1.png" data-src="487.jpg" class="lazy" 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="https://www.php.cn/" target="_blank"><img src="/static/imghw/default1.png" data-src="5454.jpg" class="lazy" style=""max-width:90%"" alt="How to achieve centering effect in html web pages (code sharing)"></a>

   <a href="https://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="left_2">

<a href="https://www.php.cn/" target="_blank"><img src="/static/imghw/default1.png" data-src="79.jpg" class="lazy" style=""max-width:90%"" alt="How to achieve centering effect in html web pages (code sharing)"></a>

    <a href="https://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="center">

<a href="https://www.php.cn/" target="_blank"><img src="/static/imghw/default1.png" data-src="79.jpg" class="lazy" style=""max-width:90%"" alt="How to achieve centering effect in html web pages (code sharing)"></a>

    <a href="https://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="right_1">

<a href="https://www.php.cn/" target="_blank"><img src="/static/imghw/default1.png" data-src="89.jpg" class="lazy" style=""max-width:90%"" alt="How to achieve centering effect in html web pages (code sharing)"></a>

    <a href="https://www.php.cn/" target="_blank">图片链接</a>

</div>

<div class="right_2">

<a href="https://www.php.cn/" target="_blank"><img src="/static/imghw/default1.png" data-src="877.jpg" class="lazy" style=""max-width:90%"" alt="How to achieve centering effect in html web pages (code sharing)"></a>

    <a href="https://www.php.cn/" target="_blank">图片链接</a>

</div>

</div>



</div>

Code rendering

If you want to simply use html language, the choice is

If you are engaged in web design, it is recommended that you use css language to modify web pages.

Recommended learning:

Html video tutorial

The 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!