當前位置:首頁 » 網頁前端 » 前端頁面將div居中
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端頁面將div居中

發布時間: 2022-09-12 16:26:53

A. 前端開發面試題,一個div中有一個子元素div,有多少種方法讓子元素垂直水平居中

3種方法:

  1. 用定位,相對定位和絕對定位都行,即:position:relative,position:absolute;

  2. 用填充,padding;

  3. 用邊距:margin.

希望能幫到你,求採納

B. 網頁前端中如何把左動的多個div居中

第一種情況:正常情況下div居中只需要對div進行樣式設定margin:0px auto;
第二種情況:如果你的div是浮動的,那麼只能將最左邊的div添加margin-left,或者將所有浮動的div外面放一個div,設置外面寬度和margin:0px auto;這樣也是可以居中的。
第三種情況:就是將div設置inline-block然後將它的父元素設置text-align:center;當然了如果這幾個div是浮動的,要將浮動刪除。
應該情況就這么多了,沒有其他情況了

C. 怎麼讓DIV永遠居中在瀏覽器的中央,用CSS或JS或是兩者結合都行,高手請進呀!給具體例子,分少可以加

做個變換菜單的DIV居中問題搞了我幾個小時,在網上搜到的都不是很理想,終於測試出來一個方法來,這個方法絕對有效,當你真的拿DIV沒辦法的時候可以試試.

<style type="text/css">
#center {
position:absolute;
width:300px;
height:60px;
left:50%;
top:50%;
z-index:1;
background-color:#000;
color:fff;
margin-left:-150px;
margin-top:-32px
}
</style>
</head>
<body>
<div id="center">絕對在中間</div>
</body>

============以下是網上其他的一些方法,供參考==============

在div+css布局中,居中問題是每個初學者都會碰到的問題:

1.水平居中
舉例代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}

#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--寬度必須的--*/
text-align: left;
background: #F6F6F6;
}

pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}

#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--寬度必須的--*/
text-align: left;
background: #F6F6F6;
}

pre{
padding: 15px;
}
</pre>
</div>
</body>
</html>

2.另外,經典論壇阿捷的例子:

主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}

說明:
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對於IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 」

完整舉例代碼如下:

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>

3.垂直居中

若BOX的寬度和高度已知:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--絕對定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div寬度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre> body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--絕對定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div寬度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
</pre></div>
</body>
</html>

解釋:如果把屏幕中點設為坐標原點(0 0),X的正方向是屏幕的右邊,Y的正方向屏幕的上邊。那麼在已知BOX寬度和高度的情況下,設BOX的屬性為絕對定位,top:50% left:50%,這樣的話,BOX的左上角就在坐標原點(0 0), 設margin-left:-320px(寬度的一半), 左上角的坐標(-320 0),再設margin-top:-240px(高度的一半),左上角的坐標現在是(-320 240),相對原點來說, BOX是完全居中了,四個頂點的值分比別是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。

適用於首頁帶語言選擇版本或者歡迎頁。

單行文字可採用行高來實現垂直居中,或者用padding來調整。

4.另一個方法:
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
</div>

<div style="border: 1 solid #C0C0C0;"><br><br><br><br><br><br><br><br>
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>

D. html中如何使整個頁面居中 div+css+js 如何使頁面窗口化內容不換行

<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}/*reset*/

.w{width:990px;margin:0auto;}
</style>

<divclass="w">我是990寬居中</div>

只需要給div定一個寬度 加上margin:0 auto 就可以居中了。

E. div里的元素分別靠左靠右居中如何實現

1、被設置元素為文本、圖片等行內元素時,水平居中是通過給父元素設置 text-align:center來實現的。

F. js使用div內容居中

1、准備好一個空的html結構的文檔。

G. html中如何讓一整個網頁居中

<html>

<head>
<metacharset="UTF-8">
<title>我的第一個HTML頁面</title>
</head>

<body>
<divstyle="display:block;margin:0auto;width:50%;background:#ccc;">
<p>body元素的內容會顯示在瀏覽器中。</p>
<p>title元素的內容會顯示在瀏覽器的標題欄中。</p>
<p>居中顯示</p>
</div>
</body>

</html>

先給所有的元素外面 加個div 然後給這個div定義 寬度,左右margin為auto,就行了

H. 如何讓div裡面的a標簽居中顯示

舉例說明:

div布局

<div id="divList">

<div class="list"><img src="../../Images/pin_person.png" /><a border=0

href="#">aaaaaa</a></div>

<div class="list"><img src="../../Images/pin_person.png" /><a border=0

href="#">bbbbbb</a></div>

</div>

CSS 樣式:

.list

{

height:45px;

line-height:45px;

overflow:hidden;

vertical-align:middle;

}

(8)前端頁面將div居中擴展閱讀:

DIV 標簽

<div> 標簽定義 HTML 文檔中的分隔(DIVision)或部分(section)。div屬於web前端的學習內容,其中<div> 標簽常用於組合塊級元素,以便通過樣式表來對這些元素進行格式化。

<div> 可定義文檔中的分區或節(division/section)。<div> 標簽可以把文檔分割為獨立的、不同的部分。

它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>,那麼該標簽的作用會變得更加有效。

I. js 讓div居中

親,水平居中的話吧position,left,top去掉,加上margin-left:auto;margin-right:auto;就可以水平居中了

J. 怎樣用css只讓div中的圖片居中

1、打開在線寫前端代碼的網站如jsrun或者jsfiddle。