之前的文章《》中，給大家介紹了一個html基本結構具體非常清楚，有了這個保證你不會顛三倒四。下面下篇文章給大家分享一下html網頁中如何實現居中效果，有需要的朋友可以參考一下。

html網頁中如何實現居中效果（程式碼分享）

html居中的元素可以分類為【行內】-【塊狀】-【行內塊狀】

常用的塊狀元素：<div> <p> <h1>.....<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

常用的行內元素：<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>

常用的行內塊狀元素：<img> <input>

塊級元素指定：使用text-align：center就無效了。

如果需要設定居中，透過設定左右兩邊的margin值為“auto”來實現。

所以左右兩邊元素剩餘區域各自均分，也就是元素兩側的區域各佔50%，那麼元素就左右居中了。

寬度不固定的塊級元素

通常有三種方式來實現居中

1、透過table元素來實現；

2、設定 display: inline方法，將顯示型別設為行內元素；

3、設定position:relative利用相對定位的方式，將元素向左偏移 50%來實現居中。

<h1>標籤讓標題居中

<p align="center">關關和鳴的雎鳩，棲息在河中的小洲</p>

程式碼效果

img圖片居中的方法

一般來說可以用CSS中的“text-align:center屬性，margin:0 auto或定位屬性”就可以居中。

img定義一個父標籤，讓這個父標籤裡面的內容居中，那麼img自然就居中

<p align="center">img……</p>

input輸入框居中的方法

style="text-align:center; "

input外面巢狀div，設定div內部元素居中的方法

<div align="center">
<input value="帳號"size="20">
</div>

html網頁中如何實現居中效果程式碼示例

<!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" /></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="" target="_blank"><img src="5454.jpg"height="150" width="200" /></a>

   <a href="" target="_blank">圖片連結</a>

</div>

<div class="left_2">

<a href="" target="_blank"><img src="78.jpg"height="150" width="200" /></a>

    <a href="" target="_blank">圖片連結</a>

</div>

<div class="center">

<a href="" target="_blank"><img src="79.jpg"height="150" width="200" /></a>

    <a href="" target="_blank">圖片連結</a>

</div>

<div class="right_1">

<a href="" target="_blank"><img src="89.jpg"height="150" width="200" /></a>

    <a href="" target="_blank">圖片連結</a>

</div>

<div class="right_2">

<a href="" target="_blank"><img src="877.jpg"height="150" width="200" /></a>

    <a href="" target="_blank">圖片連結</a>

</div>

</div>

</body>

</html>

程式碼效果圖

想要單純用html語言的話，那選擇就是<center> </center> 如果你是搞網頁設計的話，建議你使用css語言來修飾網頁。

推薦學習：

以上就是html網頁中如何實現居中效果（程式碼分享）的詳細內容，更多請關注php中文網其它相關文章！