垂直居中一张图片和多行文字在固定的盒子内

最新推荐文章于 2022-09-23 09:03:04 发布

JAVA小镇V

最新推荐文章于 2022-09-23 09:03:04 发布

阅读量1.6k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/lin74love/article/details/62887945

版权

本文介绍了如何使用CSS在高度固定的容器内实现多行文字和图片的垂直居中显示。通过line-height实现单行文字居中，结合其他CSS技巧实现多行文字和图片的垂直居中效果，并提供了在线演示链接。

摘要由CSDN通过智能技术生成

HTML代码

<div class="middle-box">
<img src="web.png"/>
<i class="visible"></i>
</div>

CSS代码

.middle-box{
   height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box img{
   vertical-align: middle; }
.visible{
   height:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JAVA小镇V

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

图片和文字在一行垂直居中

qq_35679291的博客

09-01

1833

当图片和文本在一行的时候显示时效果很奇葩文字和图片根本对不齐想让文本对齐在图片垂直居中这时候一般的方法是图片和文本盒子设置为行内快(inline-block)图片给高度文本盒子不要给高度给他们都设置 vertical-align:middle;<!doctype html> <html> <head> <!--声明当前页面的编码集：charset=gb

大小不固定的图片和多行文字的垂直水平居中

ecole的专栏

05-07

765

<!-- p {padding:5px 0} .zxx_align_box_1 {height:3em; line-height:3em; padding:0 1em; border:4px solid #beceeb; color:#069} .zxx_align_box_2 {display:table-cell; width:550px; heigh

参与评论您还未登录，请先登录后发表或查看评论

图片在盒子中水平垂直居中

二饭的博客

09-19

679

盒子css height: 40%; width: 100%; display: flex; justify-content:center; align-items: center;

css实现多行文字及图片垂直居中简单又实用的方法

李可可的博客

07-19

425

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #demo {

如何让多行文字与图片垂直居中

gang456789的博客

09-15

346

其中最主要的两点是使用table–cell和vertical-align: middle，不多说，直接上代码。<div class=box> <div> <img src="url" alt=""> </div> <div> <span>多行文字</span> </div> </div>` .box>div{ display: table-cell;

如何将盒子里的文字水平居中和垂直居中

yanhn123的博客

05-09

1万+

1. 将文字水平居中,只需要在盒子里添加 text-align: center就可以了. <style> div{ text-align: center; } </style> <body> <div>将文字水平居中</div> </body> 2. 将盒子垂直居中,只需要将文字行高等于盒子的高度就行. <style> div

html label水平居中显示,CSS布局之水平居中和垂直居中

weixin_36339234的博客

06-22

6063

一、前言开发中给标签(元素)设置居中的使用场景非常频繁，不同的标签类型设置方式也不同，本文旨在总结一套常用和标准的设置方式，同时也深入解析这样实现的原理。首先，我们大概来过一下一些必要的HTML知识点，有经验的童鞋可以略过。二、HTML标签类型1，HTML有N多标签，根据显示的类型，主要可以分为3大类。块级标签：独占一行的标签。能随时设置宽度和高度(比如div、p、h1、h2、ul、li)。行内标...

CCS居中总结(上)

qq_45765053的博客

03-20

739

CCS居中总结水平居中 text-align 1.假如现在有一段文字，“我是大帅哥”让你相对于浏览器居中。这时我们想到的第一个方法就是对于行内元素(inline)可以直接设置父元素的text-align属性值为：center就可以实现居中。怎么理解呢？看代码： .parent{ text-align:center; } <div class="parent"> <span>我是大帅哥</span> </div> 就可以实现居中了，这是怎

CSS居中的几种常见写法

Limonor的博客

11-08

1008

居中 ????文本水平居中（图片、按钮、文字等行内元素） text-align : center; 一个盒子添加了text-align : center，里面所有的行内元素 / 行内块元素都会水平居中 ????div块水平居中 margin : auto; 其实就是把子元素的 margin-left、margin-right 都设置为 auto 但是对浮动元素和绝对定位的元素无效子元素的宽度需要确定 ????一行文字垂直居中 line-height = 你这个块的 height; 文字的行高等

html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...

weixin_33185844的博客

08-04

1268

CSS高级技巧目录1、精灵图使用原因：一个网页往往会有很多小的背景图片作为装饰，为了有效减少接收和发送请求的次数，提供页面加载速度，所以出现了精灵技术。核心原理就是将小图片整合到一张图里，这样浏览器只需要发送一次请求到服务器就可以了。属性：background-position使用原理：先量好背景图片的宽和高，然后创建一个盒子，大小和背景图片一样，插入整张精灵图到盒子中，图片默认都是在盒子的左上角...

css样式--将大小不固定的图片或文字段 垂直居中

yx_cos的博客

08-10

1118

本文将介绍的是将大小不固定的图片或文字段 垂直居中的两种简单的方法方式一：将父元素的display设为display:table-cell;再加上水平居中和垂直居中的两个代码： text-align: center;vertical-align:middle;就轻松搞定了图片的垂直居中如果是文字的话，需要将子元素设置为display:inline-block;HTML代码如下：<div cl

【CSS】单行图片与文字垂直居中

最新发布

xtyxtyxtywq的博客

09-23

627

盒子居中方法

图片在盒子里面垂直居中的案例

m0_51629205的博客

11-23

4807

当我们想要获得图片的垂直居中，可采用定位的方式来实现。现在我选择用另一种方式来实现图片的垂直居中。首先，先给盒子定义宽高满足于图片在盒子内能有足够的空间占位。然后给盒子3个属性: display: table-cell; vertical-align: middle; text-align: center; 此时我们发现图片并没有完全的垂直居中，而是图片往上移动了一点距离。从而我们有分析得出，图片在垂直方向上默认的对齐方式是vertical-align:baseline（默认），元素放置在父元素的基线

盒子/图片/内容垂直、水平居中方法总结

zhaohb2016的博客

07-11

2892

盒子居中对齐 1、定位：子绝父相+position+transform 2、定位：margin 3、定位：flex 将父盒子设置成弹性盒容器让子元素水平居中，垂直居中 4、定位：table-cell 5、定位：inline-block 文本居中对齐 1、text-align:center水平对齐当中心元素是inline-类型的元素，包括inline、inline-block、inline-flex、inline-table; 在父级元素上使用text-align:center; 2、使用边距ma

盒子水平垂直居中常用的六种方法

Angel_Tears_的博客

08-09

9032

盒子水平垂直居中常用的六种方法,在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,方法一:利用定位父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50% 有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会

CSS实现大小不固定图片及多行文字水平垂直居中详细教程

本文主要探讨了在CSS中实现大小不固定图片和多行文字在高度固定的容器内的水平垂直居中问题。对于单行文字的垂直居中，常见的做法是使用`line-height`与外部容器高度保持一致，通过设置`height`和`line-height`的值...