`

css设置未知尺寸图片的水平和垂直居中

css设置未知尺寸图片的水平和垂直居中 
阅读更多

 

<!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>css设置未知尺寸图片的水平和垂直居中</title>
    <style type="text/css">
    .box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size:262px;/*约为高度的0.873，300*0.873 约为262*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

        width:400px;
        height:300px;
        border:1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}
    </style>
</head>
<body>
    <div class="box">
        <img alt="dd" src="http://www.baidu.com/img/baidu_sylogo1.gif" />
    </div>
</body>
</html>
2
顶
0
踩
分享到：
| Ajax中的同步与异步
评论
发表评论

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

相关推荐

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...

    DIV+CSS 图片垂直居中效果

    在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`&lt;div&gt;`元素是一...

    未知大小的图片自适应水平垂直居中源码纯CSS

    未知大小的图片 垂直居中，水平居中，纯CSS。兼容主流浏览器。

    div不定宽高的水平和垂直居中

    综上所述，针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求，我们可以选择使用CSS传统方法（如绝对定位）或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性，应根据实际项目需求来选择最合适...

    DIV水平垂直居中

    这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一种流行的JavaScript库，提供了丰富的功能和简便的API。 首先，我们来探讨CSS中...

    未知大小的图片在已知容器中的垂直居中和水平居中

    δ知大小的图片在已知容器中的垂直居中和水平居中，一直是困扰大家的问题，今天西西带给大家一个简单的实现办法，详见css文件，此代码兼容各个浏览器，源码库推荐下载！

    对未知高度的图片设置垂直居中的方法详解

    总结起来，实现未知高度图片的垂直居中，可以通过设置外部容器为display: table-cell，并使用CSS的vertical-align属性来轻松实现。但是，由于不同浏览器间的兼容性问题，我们需要为旧版IE浏览器准备特殊解决方案。...

    CSS2.1如何让块元素垂直水平居中.rar

    对于水平和垂直居中，`display: flex`或`display: grid`在CSS3中非常有用，但在这里我们将专注于CSS2.1的解决方案。 ### 已知宽高块级元素的居中方法： 1. **使用绝对定位**： - 设置父元素`position: relative;`...

    css图片垂直居中 css中如何实现图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...

    CSS 实现未知内容高度的垂直水平居中(改良版)

    垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...

    css实现垂直居中

    在网页设计中，让元素在页面上垂直居中是一项常见的需求。CSS（Cascading Style Sheets）提供了多种方法来实现这一目标。以下是一些主要的CSS技术，...在实践中不断尝试和学习，可以让你更好地掌握CSS垂直居中的技巧。

    CSS设置未知大小图片在已知大小容器水平垂直居中

    复制代码代码如下: &lt;!...未知大小图片在已知大小容器水平/垂直居中&lt;/title&gt; &lt;style type=”text/css”&gt; .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; ve

    垂直居中.docx

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

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**： CSS中的定位...

    css 未知高度元素绝对居中

    对于未知高度元素的垂直居中，可以设置父容器的`display`属性为`flex`，然后使用`align-items: center;`来实现垂直居中。例如： ```css .parent { display: flex; align-items: center; } ``` 2. **Grid布局...

    用CSS将登录框水平垂直居中于浏览器.pdf

    本文将详细解析如何使用CSS将登录框水平垂直居中于浏览器窗口。 首先，我们要明白CSS中的定位机制。在CSS中，我们可以使用`position`属性来设置元素的定位方式，主要有`static`（默认值）、`relative`、`absolute`...

    css实现垂直居中的方法

    这种方法通过将元素定位为绝对位置，并使用 `top`、`bottom`、`left` 和 `right` 的值为 `0`，然后设置 `margin: auto` 来实现水平和垂直居中。 ```css #content { position: absolute; top: 0; bottom: 0; left...

    使用css实现div垂直居中的示例

    1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position: absolute`，并配合`left`、`top`、`margin-left`和`margin-top`来...

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