CSS样式-图片居中显示

桃扇骨 2024-04-18 09:05 6阅读 0赞

# 前言 #

在前端开发的过程中，越来越体会到css样式的重要性。

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]  
  html代码：

<img src="../../assets/pictures/fail.png" style="width: 60px; height: 60px;" class="btnfail"  />

是不是想到使用`text-allign:center`，但是使用`text-allign:center`的效果如下：  
  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
  加上`vertical-align: center;`的效果还是上图这样，所以那应该如何实现呢？

成功实现的CSS代码：

.btnfail{
        display: block; 
        margin:auto; 
        margin-top: 15%;
    }

# 结语 #

很简单的小功能，你有没有想到这样实现呢？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7d4573cf8a134ee4a3572c42301ccf56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1425ba5f5aae4e1689dc063b1c5af469.png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式-图片居中显示

前言在前端开发的过程中，越来越体会到css样式的重要性。实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n...

桃扇骨/ 2024年04月18日 09:05/ 0 赞/ 7 阅读

相关 CSS背景图片background-image缩放如何居中显示

正常显示：全屏 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

雨点打透心脏的1/2处/ 2022年12月29日 11:25/ 0 赞/ 160 阅读

相关 CSS样式——div居中方法

1、绝对居中给div设置样式，div默认显示位置为body的左上方。 width: 400px; height: 300px;

比眉伴天荒/ 2022年12月17日 01:26/ 0 赞/ 102 阅读

相关 java实现Excel表格居中样式居中显示失败

前言项目开发中，使用导出Excel表格， -------------------- Java实现Excel表格导出在项目开发中，使用Excel表格导出功能时

青旅半醒/ 2022年10月30日 11:24/ 0 赞/ 295 阅读

相关【css】让img图片居中显示

1.说明想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏 2.代码 HTML <div id="di

ゝ一纸荒年。/ 2022年10月19日 04:19/ 0 赞/ 148 阅读

相关 css实现图片上下居中显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

我就是我/ 2022年09月22日 15:58/ 0 赞/ 152 阅读

相关利用css将文字和图片水平垂直居中显示

无标题文档字体需要居中 ![Center][]

雨点打透心脏的1/2处/ 2022年06月16日 04:50/ 0 赞/ 175 阅读

相关 css让图片居中

css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充 1、html如下：

不念不忘少年蓝@/ 2022年06月04日 08:28/ 0 赞/ 196 阅读

相关 css 如何让图片居中图片适应

前段时间做移动端开发遇到的问题，以前是没注意到css有个object-fit属性，一直对图片适应不知道何从下手。移动端基本上都是需要做图片适应处理的，比如轮播图，商品封面

小鱼儿/ 2022年02月27日 06:00/ 0 赞/ 222 阅读

相关 css 样式水平且垂直居中

<div class='parent'> <div class='child'>DEMO</div> </div> .parent {

左手的ㄟ右手/ 2021年09月27日 08:42/ 0 赞/ 278 阅读