文本、图片居中

text-align:设置在容器中,设置的是容器中元素的水平位置,对于容器内的块元素是不起作用的,块级元素可以使用自适应。

vertical-align:设置在具体元素中,如<img>,但是表现不是在整个容器的垂直中间,而是在行元素所在行的中间。

  如果想要通过使用vertical-align使行元素在容器垂直中间,可以对容器设置line-height为容器的高度,然后再对容器中的行元素设置vertical-align:middle;

  但是,这个只能够针对容器中只有一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test01</title>
    <style>
        div{
            border:1px solid black;
            width:400px;
            height:200px;
            line-height: 200px;
        }
        img{
            width:100px;
            height:100px;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="香山7.jpg"/>
        asdf
    </div>
</body>
</html>

附:text-align   word-spacing   letter-spacing都是写在容器(块元素)中的属性

文本、图片居中

时间: 2024-08-30 16:46:23

文本、图片居中的相关文章

css图片居中(水平居中和垂直居中)

http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍 css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上c

让TextView的drawableLeft与文本一起居中显示

 TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢用RadioButton的这几个属性实现很多效果,但是苦于不支持让drawbleLeft与文本一起居中,设置gravity为center也无济于事,终于有空研究了一下,这里与大家一起分享. 声明 欢迎转载,请注明出处! 博客园:http://www.cnblogs.com/ 农民伯伯: http://w

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如 这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的 显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

文本图片自适应高度小bug以及解决办法

自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中 点击效果: 注:- (void)layoutSubviews 方法不能同时操作,否则会出现cell的高度错乱 显示: 点击:

文本图片分享

以下所有的文本图片都收集与网络,纯属于个人兴趣.版权均归原网站/系统所有,如需使用,请与原网站/系统取得授权! \\\|/// \\ - - // ( @ @ ) ┏━━━━━━━━━━━━oOOo-(_)-oOOo━━━━━━━━━━━━┓ ┃ ┃ ┃ http://www.china-code.net ┃ ┃ http://www.lyf.cn ┃ ┃ ┃ ┃ Oooo ┃ ┗━━━━━━━━━━oooO━-( ) ━━━━━━━━━━━━━━┛ ( ) ) / \ ( (_/ \_) /

关于大图片居中显示~适应移动端

今天修改项目的时候碰到一个问题,移动端点击小图片后,打开一个大图片显示:由于这个大图片的比例是不确定的,所以如何显示就成了一个问题. 最初的这个功能是设置了一个css3的属性,然后在Android手机上出了问题, -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; 然后我查了一下这个属性: 因为版本的原因,一些Android机没法使用这个属性. 我找了找居中显示的资料,看了看百度图片的图片显示方

diplay:table-cell和伪元素:after方法让图片居中

让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 一,display:table-cell 这个属性是让元素以表格单元格的形式呈现类似table标签中的td,其他现代浏览器和ie8+都是支持的 ie6/7是不支持的(当然下面也有解决方法). 如果只看table元素 就两个特点: 1,同行等高 2,宽度自动调整 那么table-cell是不是也具有这

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

用CSS让网页背景图片居中的方法

网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便: <div sty