www.ypnh.net > html上下居中代码

html上下居中代码

假设html代码如下:<div id="some"></div> 要让他在页面上垂直居中,样式如下:#some{width:300px; height:300px;postion:absolute;top:50%;margin-top:-150px;} 这里要注意的是,margin的负值是这个div高度的一半.如果还要水平居中:#some{width:300px; height:300px;postion:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-150px}

上下居中要分固定高度屏或者不固定高度屏 固定高度的话,可以将高度/2-div高度/2 不固定高度就是要用到JS读取屏高和div高度,再经由计较

一般上下居中的问题可以使用line-height解决,将DIV中内容的line-height设为DIV的高即可,如果DIV内嵌套DIV,可以使用{position:relative; top:(外DIV高-内DIV高)/2}

给图片所在的div 设置如下属性width: px;height: px;display:table-cell;text-align:center;vertical-align:middle;

方法1、现在通常用的是div+css架构.css中的写法是对字体加样式:text-align:center;//居中如:<div class="jz">居中</div> css为:.jz{text-align:center;}方法2:在 content 元素外插入一个 div.设置此 div height:50%; margin-bottom:-

<!DOCTYPE HTML> <html lang="en"> <head> <title>html文字居中测试</title> <meta charset="UTF-8"> <style type="text/css"> body{background: #ddd;} div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;} .box1{

设置文2113字或者图片居中:<center></center>;第一种办法: 直接用5261center来设置, 居中4102位置<div style="text-align: center;">第二种办法: 就是用距1653离来控制它的位置 margin:50 50 0 0;这种也可以固定到中间位置根据实际情况来居中,看左右是否有添加的文字或者图片的代码.

<div style="width:300px; margin-left:auto; margin-right:auto; text-algin:center"><object width="300" height="300" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/

<html> <head> <title>垂直水平居中层</title> <style> .divMain{ background-color:#ff00ff; width:480px;/*(一定要设置这个值)*/ height:320px;/*(一定要设置这个值)*/ margin-left: auto; margin-right: auto; text-align:center; vertical-align:middle;

左右居中:margin:0 auto; 上下居中: 1.设置父级div高度(假设为300px); 2.设置table的高度(假设为100px); 3.设置margin-top为:300px/2 - 100px/2 testbody {width: 300px;height: 300px;border: 1px solid red;text-align: center;}tabl 代码如

网站地图

All rights reserved Powered by www.ypnh.net

copyright ©right 2010-2021。
www.ypnh.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com