`

div 让文字或图片居中

BBS百度CSSHTML 
阅读更多

在div 中让 文字或图片居中,请参考以下代码1：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中</title>
</head>
<style type="text/css">
.imageWrap{ width:200px; height:200px; text-align:center; border:#999 solid 1px; display:table-cell; vertical-align:middle; position:relative;}
.imageWrap .outer{ +position:absolute; +top:50%;+left:0}
.imageWrap .inner{ +position:relative; +top:-50%;+left:0}
.imageWrap img{ display:block; margin:0 auto}
</style>
<body>
<div class="imageWrap">
<div class="outer">
<div class="inner">
<img src="http://www.baidu.com/img/baidu.gif"/>
<a href="#">百度</a>
</div>
</div>
</div>
</body>
</html>

 

参考代码2：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

<style type="text/css">
<!--
.frame{
    float:left;
    margin:2px;
}
.outer {
    height: 250px;
    width: 240px;
    overflow: hidden;
    background:gold;
    position: static !important;
    position: relative;
    display: table !important;
}
#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
}
</style>
</head>
<body>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner"><img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /></div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner">
                <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /><br /><br />
                <img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />
            </div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner">图片与文本内容混合<br><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" /><br>图片与文本内容混合</div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner"><span>图片与文本</span><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" /><span>图片与文本</span></div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>
</div>
    </div>
</div>
</body>

分享到：
| setInterval("",1000) 和setTimeout(,3000 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div的内容图片垂直居中代码（兼容多浏览器）.rar

    4. **使用line-height**：如果div只有一个行内元素，如图片或文字，可以将`line-height`设为与div相同的高度来实现垂直居中。 ```css .parent { line-height: height; } .child { vertical-align: middle; } ``` ...

    jquery.valign插件实现图片,文字上下左右垂直居中

    此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果，缺点是采用了部分css3样式，兼容性较差，相关链接：纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign，可...

    html图片居中图片列表左右切换可放大展示特效

    在网页设计中，实现"html图片居中图片列表左右切换可放大展示特效"是一种常见的功能需求，主要用于增强用户体验，使用户能更直观地查看和交互图片。以下将详细讲解这个功能涉及的关键知识点。 1. HTML 结构：首先，...

    DIV+CSS中让布局、背景图片、文字内容居中的方法

    接下来是让网页的背景图片居中的方法。在CSS中，通过设置背景图片的属性可以控制图片的位置。背景图片居中主要涉及到两个属性：background-position和background-repeat。使用background-position可以控制图片的位置...

    垂直居中.docx

    这种方法适用于单行文字，但是在 Internet Explorer 6 及以下版本中，不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中...

    DIV+CSS中让布局居中.docx

    另外，如果要让背景图片居中，可以使用以下CSS代码： ```css body { background: #FFF url(http://www.divcss5.com/img/css-logo.gif) no-repeat center; } ``` 这里的`center`参数使得背景图片在水平方向上居中...

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

    同时，可以设定图片的样式，使其在div内居中展示。 3. JavaScript处理：添加事件监听器来响应用户的操作，例如点击按钮或者鼠标悬停。在事件处理函数中，使用`document.getElementById`获取到对应的div元素，然后...

    层固定，图片自动大小且居中

    为了使图片居中，可以使用CSS的`position`和`margin`属性。由于我们已经设置了层为相对定位，现在可以将图片设置为绝对定位，使其相对于容器居中： ```css img { position: absolute; top: 50%; left: 50%; ...

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    再者，如果需要对多行固定高度的文字进行垂直居中，由于`vertical-align`属性只对表格元素有效，我们不能直接应用于`div`等元素。这时可以采用其他技巧，比如使用`display:table-cell`和`vertical-align:middle`，将...

    CSS解决文字与图片不能水平居中对齐的问题

    在处理网页设计时，经常会遇到需要在文字旁边放置图标或图片的情况。在这种布局中，如果直接将图片和文字放在一起，图片默认会和文字的基线对齐，这可能不是我们期望的效果，尤其是当图片比文字的行高更高时。这时，...

    CSS网页布局：div垂直居中的各种方法

    它主要应用于表格元素，如`&lt;td&gt;`、`&lt;th&gt;`和`&lt;caption&gt;`，而不是`&lt;div&gt;`或`&lt;span&gt;`这样的块级或行内元素。因此，当试图在`&lt;div&gt;`上使用`vertical-align`属性来实现垂直居中时，我们需要寻找其他策略。 1. **单行文本...

    div整体居中其内容不居中的示例代码

    但是，在这个div内部的内容（如文字或其它子元素）可能需要有不同的排版要求，如左对齐或者缩进等，这需要对内容单独设置样式。 3. 使用CSS进行布局控制：在示例代码中，通过CSS设置了div的宽度、背景、边框、内...

    DIV和SPAN垂直居中对齐的实现方法

    此外，如果DIV或SPAN元素内不仅仅是文本，还有其他行内元素或图片，那么这些内容也会随着行高的设置而垂直居中。不过需要注意的是，如果内部元素是块级元素，则需要对这些内部块级元素也设置相同的line-height值，...

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

    每个`div`内部可能包含一个用于展示图标的`&lt;img&gt;`标签和一个用于显示文字的`&lt;p&gt;`或`&lt;span&gt;`标签。这样的结构有利于实现清晰的图文分离，并且方便通过CSS进行样式控制。 接下来，我们关注`css`文件，这通常是一个`....

    谷歌浏览器 div 水平对齐

    这样，我们可以用 `vertical-align: middle` 实现垂直居中，再配合 `text-align: center` 实现文字的水平居中。具体代码如下： ```html &lt;div class="table border"&gt; &lt;div class="cell"&gt; &lt;div class="text"&gt; ...

    css控制div中元素居中的示例

    最后，文章中提到的使用OCR扫描可能造成的一些文字识别错误，在此不进行讨论，重点是理解如何使用CSS控制div中的元素居中。 综上所述，控制div中元素居中可以通过设置"text-align"属性实现水平居中，通过修改...

    CSS实现同一行的图片和文字垂直居中对齐的方法

    让同一行内的图片和文字垂直居中对齐 div#buttons * { vertical-align: middle; } &lt;div id="buttons"&gt; 找回密码 &lt;/div&gt; ``` 在上述代码中，我们定义了一个 div 元素，其 id 为 "buttons"。在该 ...

    大小不固定的图片、多行文字的水平垂直居中实现方法

    在CSS布局中，水平垂直居中是一个常见的需求，但针对大小不固定的图片和多行文字，实现起来就更具挑战性。本文将介绍两种创新的方法，适用于不同情况下的居中显示。 首先，对于大小不固定的多行文字垂直居中，我们...

Magicbox
Global site tag (gtag.js) - Google Analytics