设置div中的div居中显示

设置div中的div居中显示

方法一、

<div class=‘big‘>

    <div class=‘small‘>box1</div>

 </div>

style样式:
.big{
  height:200px;
  width:200px;
  border:black solid 1px;
  position:absolute;
  left:150px;

}
.small{
  height:100px;
  width:100px;
  background-color:green;
  position:relative;
  left:100px;
  top:100px;
  margin-top:-50px;
  margin-left:-50px;
  border:black solid 1px;
}

方法二、

div class=‘big2‘>

    <div class=‘small2‘>box3</div>

 </div>

.big2{
  height:200px;
  width:200px;
  border:black solid 1px;
  text-align:center;

}
.small2{
  height:100px;
  width:100px;
  background-color:green;
  margin:50px auto; //外面的div高度的一半
  border:black solid 1px;
}
时间: 2024-10-24 16:43:53

设置div中的div居中显示的相关文章

如何让Div中的Table居中

有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如: <div style="text-align:center">                                            <table border="1" cellpadding="3&

div中嵌套div水平垂直居中

div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: 1 <div align="center" style="width: 200px;height: 200px;background: green;display: table-cell;vertical-align: middle;"> 2 <div style=" width: 100px;height: 100px;background: blue;&qu

div中的div如何居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head> <body> <div class="father"> <div class="

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

css div中内容绝对居中(多行内容)

div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title>绝对居中 </title> <style type="text/css"> h1, h2, h3, h4, h5 { margin:0px; padding:0px; } .panel { width:300px; height:150px; background

让div自适应浏览器窗口居中显示

今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1"> <div class="div2">自适应浏览器水平垂直居中</div> </div> css代码: .div1{ width: auto; height: 600px; background: #cccccc; position:

小 div在大 div中左右上下居中

<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3瀑布布局</title> <style type="text/css"> /*****************方法1 上下左右居中***********

让div中的table居中

div 标签上写  style="text-align:center" div中的table中写 style="margin:auto;"  <table  style="margin:auto;"  margin代表 外边距 顺时针方向数  上 右 下 左   一共可以写四个. http://www.w3school.com.cn/cssref/pr_margin.asp

WPF之让ListView中的CheckBox居中显示

第一步:在资源中定义一个居中的样式: <Window.Resources> <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </Window