css 单行图片文字水平垂直居中汇总
(1) 水平居中
a. 行内元素水平居中
因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如:
<div style="width: 600px; height: 300px; border:1px solid red;text-align: center;" >
<img src="static/images/banner.png" alt="" style="width: 200px; height: 200px;">
</div>
b. 块级元素水平居中
块级元素定宽后设置margin:0 auto(第一个数值视情况而定)即可,例如
<div style="width: 600px; height: 300px; border:1px solid red;" >
<img src="static/images/banner.png" alt="" style="width: 200px; height: 200px; display: block; margin: 0 auto;">
</div>
(2) 垂直居中
- 作为背景图片定好宽高,设置background属性 ,例如
.bg-center{
background:url('static/images/banner.png') no-repeat;
background-size: 200px 200px;
background-position: center center;
}
- 非背景图设置图片position:absolute; 设置left top 距离即可,例如
<div style="width: 600px; height: 600px; border:1px solid red; position: relative" >
<img src="static/images/banner.png" alt="" style="width: 200px; height: 200px; position: absolute; left: 200px;top:200px;">
</div>
注:如果子元素绝对定位父级需要添加position:relative 样式。
(3) 图片文字垂直居中
- flex方式(要求支持flex) 例:
兼容性:https://blog.csdn.net/m0_37142141/article/details/79709747
<div style="width: 300px;height: 60px; border:1px solid red; display: flex;align-items: center;">
<div style="flex:0 0 48px;border:1px solid green;font-size: 0;">
<img src="static/images/banner.png" alt="" style="width: 48px;height: 48px; ">
</div>
<div style="flex: 1;border:1px solid green;">abc123我是</div>
</div>
效果图:
- 背景图片形式(推荐方式)
<div style="width: 300px;height: 60px; border:1px solid red; background: url('static/images/banner.png') no-repeat;background-size: 48px 48px; background-position: left center; padding-left: 48px; line-height: 60px;">
abc123我是
</div>
效果图:
如果只有图片没有文字的话可以参照(2)中的方法,另外下面代码也可以实现
<div style="width: 300px;height: 60px; border:1px solid red;line-height: 60px; font-size: 0;">
<img src="static/images/banner.png" alt="" style="width: 48px;height: 48px; vertical-align: middle;">
</div>
效果图:
好了到此结束。
css 单行图片文字水平垂直居中汇总的更多相关文章
- CSS 实现:文字水平垂直居中
☊ [实现要求]: <div class="demo1"> 标题1111 </div> √ [实现]: 方案一:普通布局 .demo1 { text-ali ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
- css知识笔记:水平垂直居中(别只看,请实操!!!)
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- Android进阶(二十二)设置TextView文字水平垂直居中
设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- CSS元素(文本、图片)水平垂直居中方法
1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- css实现未知高度水平垂直居中
页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...
随机推荐
- 如何在win10上同时安装python2和python3
哎,其实本人已经用惯了python2,听说python3的语法有很多不一样的地方,那我之前写的算法改起来岂不是日了狗了吗?所以一直没改用python3.但是谷歌的那个TensorFlow,在windo ...
- python中lambda的另类使用
带if/else: ( lambda x, y: x if x < y else y )( 1, 2 ) 科里化: ( lambda x: ( lambda y: ( lambda z: x + ...
- dom4j解析xml文件和字符串
转自:http://www.cnblogs.com/black-spike/p/9776180.html 最近在工作中,需要调别的接口,接口返回的是一个字符串,而且内容是xml格式的,结果在解析jso ...
- 33.promise future多线程通信
#define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <thread> #include <futur ...
- golang pipe
===============golang pipe============== package main import ( "fmt" "io" ) func ...
- weblogic虚拟路径配置
首发地址 https://blog.leapmie.com/archives/344/ 前言 weblogic的虚拟路径配置有两种: 一种是在项目下配置,即在weblogic.xml中配置,该方法配置 ...
- 推广一下新Blog www.hrwhisper.me
新博客地址:www.hrwhisper.me 欢迎互访加友链~
- (转)Tomcat文件详解
做web项目,最常用的服务器就是Apache的tomcat.虽然一直在用tomcat,但都是仅限在使用的阶段,一直没有深入学习过.想深入学习tomcat,首推的肯定是官网:http://tomcat. ...
- 【hdu 6181】Two Paths
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6181 [题意] 让你求从1到n的次短路 [题解] 模板题; 因为点可以重复走; 则一定会有次短路. di ...
- 学习笔记(四):jQuery之动画效果
1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...