当前位置:首页 » 网页前端 » 前端页面将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。