⑴ DIV+CSS中图片居中,文字环绕图片的四周显示的代码怎么写
是这样 BODY是指页面 那么定义居中是指页面内部元素居中 所以
text_align:center是针对像BODY这样的父元素的(当然指IE都知道)
margin:0 auto是针对父元素内要约束的子元素的(指标准都知道)
所以 你这个要想居中 内部可拟定个子元素 比如BOX吧 然后定义:
body{text-align:center;}
#box{margin:0 auto;}
HTML码:
<body>
<div id="box"></div>
</body>
分就不用了 希望对兄弟有用就好
⑵ 关于div+css实现文字环绕图片的问题
HTML代码如下:
<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
</div>
<p>Numerous blocks of text</p>
</div>
CSS代码大致如下:
div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }
详见文章http://www.xland.com.cn/article/29/33/0806/28927.htm
⑶ div如何让英文字母环绕图片,同样的样式,用在中文文字上就可以,换字母就不行了,求教。
因为你这个测试的英文内容没有空格,所以不会像中文那样显示。
你改用正常的英文单词试试。
正常情况下每个英文单词都会用空格分开。
⑷ div+css文字环绕图片,但是图片要在文字的右下角
可以设置其CSS属性vertical-align。
vertical-align属性可设置元素的垂直排列。
img.top {vertical-align:text-top}
引用这个CSS可以解决你的问题。
可以参考CSS帮助文档:http://www.w3school.com.cn/css/pr_pos_vertical-align.asp
里面有实例,一目了然。
如还有什么疑问,请留言!
楼主关心下帖子,问题是否已经解决?
我的方案是否可行?
⑸ css+div文字环绕图片 图片居中显示怎么弄
=======
文字环绕
=======
<style>
div {
width:300px;
border:1px solid red
}
img {
float:center;
width:100px;
height:100px
}
</style>
<div>
<img src="/images/logo.gif" />
绕啊绕啊
绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊 绕啊绕啊
</div>
=======
图片居中
======
<center><img src="img/logo.gif"></center> <!--html-->
==============================================
<!---css-->
========
div{
margin:0 auto;
padding:0px;
}
<div id="logo">
<img src="img/logo.gif">
</div>
CSS的定义:
#logo{width:500px; height:300px;}
#logo img{margin-top:100px; margin-left:150px;}
=================================
可以把让图片先居中,后环绕。
⑹ 如何让文字环绕在 DIV 或者其他元素 的四周 ,四面都要有文字。
我懂lz的意思,但是lz想过木有,word中文字四周环绕图片的效果,图片是插在文字中某个字符后面开始的,在html中,如果你想实现这样的效果,就必须把图片插在一个字符后面,这样,从该字符起,后面的宽度、下面的高度,留出给图片,是合理的。
目前单纯用基础的css+html ,只能实现3面环绕,如果按lz说不能在中间插图,只能实现2面环绕。
说了这些,lz想必须实现,js也是可以的,完全满足lz要求的会复杂点。
但是不知道你给的这些限定条件有没有可以修改的?
如1,载入的文字长短不确定,但是图片希望一直居中显示在文字中间,
可以js获得当前文字段落+图片float:right后外层div的宽度和高度,js将从高度的一半、宽度的一半处将图片插入。
如2,图片载入后的文字希望能编辑时不出差错,
js将文字中<img>全部删除后把文本段落送出来,进行操作。
如果lz不精通js,还是交给开发人员来吧……
另外一种:
如果文本是固定的,你可以手工划分出上面的div,左边的div 中间的图片 右边的div,下面的div,然后依次把文字放进去,这也是可以的。
⑺ 在div定义中字环绕图片怎么定义
用float就可以了
给图片定义 float:left; 文字就围绕在图片右边。
如果定义 float:right; 文字就围绕在图片左边。
下面是代码,自己试试看
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{ margin:0px; padding:0px;}
div {
width:300px;
border:1px solid red;
}
img {
float:left;/*控制图片的位置*/
width:100px;
height:100px;
border:1px solid #000000;
}
</style>
<body>
<div>
<img src="/images/logo.gif" />
<p>文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边文字环绕在图片的右边</p>
</div>
</body>
</html>
⑻ css+div怎么样可以让文字四周环绕图片
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
div {
width:300px;
border:1px solid green
}
img {
float:left;
width:120px;
height:120px
}
</style>
</head>
<body>
<div>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
</body>
</html>
⑼ 请问怎么用DIV制作图片文字四周环绕的效果
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<styletype="text/css">
div{
position:absolute;
top:50%;
left:50%;
height:200px;
margin-top:-100px;
width:400px;
margin-left:-200px;
}
</style>
<scripttype="text/javascript">
window.onload=functionhello(){
vart=document.getElementById("t");
varoldText=t.innerText;
varnewText="";
for(vari=0;i<oldText.length;i++){
if(i>oldText.length/2&&(i<oldText.length/2+1)){
newText+="<imgsrc="img/gui.gif"/>";
}
newText+=oldText.charAt(i);
}
t.innerHTML=newText;
}
</script>
</head>
<body>
<divstyle="width:50%"id="t"style="align-content:center;">
接着,爱佑慈善基金会秘书长耿源女士发布了爱佑慈善基金会2014年度报告。作为中国首家注册成立的非公募基金会,爱佑慈善基金会始终走在慈善透明化的前列。今年是爱佑慈善基金会连续第五年公开发布年度报告,向捐赠人、媒体及社会大众全面、客观地披露爱佑慈善基金会2014年度整体业务报告、筹款报告、财务报告及运营情况。报告显示爱佑慈善基金会的2014年度筹款收入为202,794,179.38元,比上一年度增长27.74%,“爱佑童心”项目2014年救助先心病患儿5859名,截止2014年年底,“爱佑童心”历史累计救助近3万名,仍为全球规模最大的儿童先心病救助项目。“爱佑天使”项目救助患儿933例,累计汇款4000人次。“爱佑新生”项目养护患儿总数为3027人,床位总数890张。“爱佑和康”项目已在北京,深圳,宁夏、湖北建立四家康复机构。同时,爱佑慈善基金始终坚持创新并不断摸索能解决社会问题、促进公益慈善行业发展、产生更大社会影响力的新模式,不断尝试探索适合中国公益慈善行业发展的理念和手法,以丰富的项目实践逐渐形成一套独特的慈善方法论,其品牌影响力日趋深远。
《福布斯》中文版调研是《福布斯》中文版自2004年起第十次发布慈善榜单。本次上榜的100位企业家(企业)现金捐赠总额为49.2亿元,为近4年来最高;榜单中捐赠过亿元的企业家有14位,捐赠金额占到总额的64.5%,其中中国民生银行的董事长洪崎、新尚集团的董事长唐立新和大连万达集团的董事长王健林分别以3.62亿元、3.45亿元和3.29亿元的现金捐赠总额名列前三位。史国伟表示,十年来入选榜单的名字不断更换
</div>
</body>
</html>
⑽ div文字这样环绕图片!css怎么定义!
方法很分多,可以把图片和文字分别放在div中然后浮动即可。
我写一个给你,稍等!
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
img{
float:left;
}
</style>
</head>
<body>
<div>
<imgsrc="test1.jpg"alt="">
<ul>
<li>地址:***********</li>
<li>电话:1111111111</li>
<li>联系人:大大大大大大</li>
</ul>
</div>
</body>
</html>
你自己再改一改,有用就采纳!