`
ylrainbow
  • 浏览: 1206 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

div中图片 文字局中

阅读更多
<!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=GB2312" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.outer {
height: 250px;
width: 240px;
overflow: hidden;
position: static !important;
position: relative;
display: table !important;
border:1px solid #FF0000;
}
#middle { /* for explorer only*/
position: absolute;
top: 50%;
}
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#inner { /* for explorer only */
position: relative;
top: -50%;
width: 100%;
margin: 0 auto;
text-align:center
}
li{
list-style:none;
float:left;
margin:2px 5px;
}
</style>
</head>
<body>
<ul>
<li>
<div class="outer">
<div id="middle">
<div id="inner"><img src="http://www.iteye.com/images/user-logo.gif" alt="" /></div>
</div>
</div>
</li>
<li>
<div class="outer">
<div id="middle">
<div id="inner">fdskfjdskfjds</div>
</div>
</div>
</li>
</ul>

</body>
</html>
分享到:
评论

相关推荐

    js+div实现文字滚动和图片切换效果代码.docx

    在示例代码中,`&lt;div class="txt"&gt;`部分包含了文字滚动的Div,`&lt;div class="box-b" id="div1"&gt;`是图片切换的容器。`&lt;div id="indemo"&gt;`中的四个Div元素分别代表四张图片,通过JavaScript的lunTab函数控制显示。 3. ...

    div转图片并下载.zip

    在IT行业中,将网页元素如`div`转换为图片并实现下载功能是一个常见的需求,尤其在数据可视化、屏幕截图或保存用户自定义布局时。这个压缩包“div转图片并下载.zip”提供了一个可以直接运行的解决方案,主要涉及...

    div设置背景图片透明度且字不透明

    在网页设计中,有时我们需要实现一个效果:让`div`元素的背景图片具有透明度,但其中的文字保持不透明。这个需求可以通过CSS样式来实现。本文将详细解释如何使用CSS来设置`div`的背景图片透明度,同时保持文字的可见...

    在可编辑div中插入文字或图片解决思路与实现步骤

    最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 基本上编辑...

    Div块上下左右循环滚动

    最后,`Images`目录可能包含了与滚动效果相关的图片资源,比如作为Div背景的图片,或者在滚动过程中显示的动画图片。这些图片可以通过CSS的`background-image`属性或者JavaScript的DOM操作添加到Div元素中。 总的来...

    图片提示框(js+div图片提示框)

    在这种情况下,“图片提示框(js+div图片提示框)”提供了一个有效的解决方案。这个组件利用JavaScript和HTML的div元素来创建可自定义、兼容多种浏览器的图片提示框,包括Firefox和Internet Explorer等主流浏览器。 ...

    图片文字轮播效果(图片和文字自动滚动)

    图片文字轮播效果是一种常见的网页或应用程序中的动态展示方式,常用于新闻资讯、产品介绍、广告展示等场景。这种效果可以有效地利用有限的屏幕空间,循环播放多张图片和对应的文字描述,为用户提供丰富的信息浏览...

    DIV+CSS纵向横向下拉菜单,JS图片文字横向滚动小例子

    在这个主题中,我们将深入探讨如何利用 `DIV+CSS` 创建纵向横向下拉菜单以及如何用 `JavaScript` 实现图片文字的横向滚动。 首先,我们来关注 `DIV+CSS` 纵向横向下拉菜单。`DIV` 是HTML中的一个布局容器元素,通过...

    DIV+CSS图标文字列表布局样式代码

    在这个名为"DIV+CSS图标文字列表布局样式代码"的资源中,我们可以看到一个适用于网页图文列表的布局方案。 首先,`index.html`是网页的主文件,它包含了页面的基本结构和内容。在这个例子中,`index.html`很可能...

    DIV_CSS图片缩略显示

    ### DIV_CSS图片缩略显示详解 #### 一、概述 在网页设计中,为了提高用户体验,经常需要将图片以缩略图的形式展示出来,并在用户点击时显示全尺寸的图片。这种方式不仅能够节省加载时间,还能使页面布局更加美观、...

    初学-html中如何让图片放左边,文字紧邻着放右边

    在HTML中,将图片放在左边并让文字紧邻着放在右边是常见的布局需求,这主要涉及到元素的浮动、布局和样式控制。以下是一份详细的知识点解析: 首先,要实现图片在左,文字在右的效果,可以使用CSS的`float`属性。`...

    JS实现div内部的文字或图片自动循环滚动代码

    在本示例中,我们将详细探讨如何使用JS来实现div内部的文字或图片的自动循环滚动。 首先,我们创建了一个CSS样式,定义了两个类:`.content` 和 `dl`。`.content` 是包含滚动内容的div,设置了宽度、高度、位置以及...

    jquery-图片展示-鼠标滑过图片文字遮罩

    本文将深入探讨“jquery-图片展示-鼠标滑过图片文字遮罩”这一技术主题,以及如何通过jQuery插件实现这种效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务,...

    DIV CSS图标文字列表布局样式.zip

    在创建图标文字列表时,我们可以为每个列表项创建一个&lt;div&gt;,并将图标和文字分别放置在其中。例如: ```html &lt;div class="list-item"&gt; &lt;i class="icon"&gt;&lt;/i&gt; 列表项内容 &lt;/div&gt; ``` 2. **CSS样式**: - **...

    js鼠标悬停到图片上显示文字详情效果

    在JavaScript(JS)编程中,实现“鼠标悬停到图片上显示文字详情效果”是一种常见的交互设计技术,它能够提升用户体验,使用户更容易理解图片所代表的信息。这种效果通常是通过结合HTML、CSS以及JavaScript来实现的...

    点击图片显示说明文字

    在页面中,我们需要一个`&lt;img&gt;`标签来展示图片,并且为每张图片添加一个隐藏的容器,如`&lt;div&gt;`,用于存放说明文字。这个容器通常设置为初始时不可见(例如通过CSS的`display:none`属性)。例如: ```html &lt;div id=...

    asp中div使用及详解

    当我们把文字、图像或其他内容放入`&lt;DIV&gt;`中时,它可以被称为“DIV block”、“DIV element”、“CSS-layer”或者简称“layer”。这里所说的“layer”指的是包含在`&lt;DIV&gt;`内的HTML内容。 #### 二、基本用法 ##### ...

    中文网站div+css

    Div是HTML中的一个块级元素,常用于组织页面结构,而CSS则是用于定义这些元素外观和位置的样式语言。理解并熟练运用Div+CSS,可以实现高效、灵活且可维护的网页布局。 【压缩包子文件的文件名称列表】:未提供具体...

    详细说明了div怎么在div上实现浮动的代码

    这在创建多列布局、图片与文字环绕等场景中十分有用。 要实现`div`在`div`上的浮动,你需要为相应的`div`元素添加`float`属性。以下是一些基本的CSS样式示例: ```css /* 创建一个左侧浮动的div */ .left-float { ...

Global site tag (gtag.js) - Google Analytics