块元素水平垂直居中、多行文本垂直居中、外部使用响应式写法

最新推荐文章于 2023-04-06 23:16:05 发布
最新推荐文章于 2023-04-06 23:16:05 发布
阅读量195 收藏
点赞数
分类专栏： flax布局 CSS3 HTML 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64460142/article/details/124205517
版权
这篇博客介绍了四种块元素水平垂直居中的CSS方法，包括使用flex布局、绝对定位、transform和浮动定位。此外，还讲解了多行文本垂直居中的两种方式，分别是通过padding和display: table-cell。最后，讨论了如何利用link标签进行外部响应式布局，根据屏幕尺寸加载不同CSS样式文件。
摘要由CSDN通过智能技术生成

1.块元素水平垂直居中

先提问：之前我们学过flex啦使盒子水平垂直居中的方式是什么呢？

解：给父级盒子设置：

            display: flex;

            justify-content: center;

            align-items: center;

以上这是第一种方法：使用flex弹性盒子布局；

我们来看一看还有的几种方式吧！未免以后会用到呢！

第二种方法：可以使用绝对定位配合margin的方式实现

            margin的值为负值

            margin-left是宽度的一半

<

最低0.47元/天 解锁文章
¹灵感不来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6.9响应式布局和居中显示
zhangjiaming02的博客
06-10 544
响应式布局&居中显示
多行文本在块元素中垂直居中
pscool的博客
02-11 633
* 只需要设置display:table-cell，并且让vertical-align:middle即可，可随p元素的高度变化都保持多行文本居中（效果见下图） */在块元素中，让单行文本居中，可以使用line-height等于块元素的高，即可让该单行文本垂直居中对齐。
多行文本水平垂直居中
q850593913的博客
06-06 199
多行文本垂直居中 <section> <h1>Hey I am Mimic</h1> <p>a web developer</p> </section> <style> section { display: flex; flex-direction: column; justify-content: center; align-items: center;
图片、多行文字的水平垂直居中
z69183787的专栏
03-04 3291
本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持im
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）
qq_41808129的博客
06-25 258
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）： https://blog.csdn.net/qq_38347669/article/details/81355104
HTML&CSS的语法与使用
yequan634299391的博客
09-04 808
互联网原理 互联网原理：上网即请求数据 HTML：制作网页文件 上网时，用户通过客户端发送http请求到服务器，服务器端将对应请求找到后，通过http响应传给本地计算机，计算机加载网页 上网过程由实际的物理文件的传输 http协议 浏览过程 输入URL→DNS域名解析（浏览器无法直接通过域名发起请求，需要将域名解析为IP地址）→建立TCP链接→发送HTTP Request→Web服务器Nginx反向代理→应用服务器Servlet处理请求→关闭TCP链接→渲染响应页面 纯文本和超文本区别 定义：纯文本只包含文
《CSS》
ChowSQ的博客
03-30 5178
CSSCSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS基础选择器标签选择器（元素选择器）类选择器多类名选择器id选择器id选择器和类选择器区别***id选择器和类选择器最大的不同在于 使用次数上。***课程目标:CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）...
前端基础总结--CSS
chenyouleww的博客
07-08 552
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
单行及多行文本垂直居中,(ie用了js)
幸福有多远
03-20 451
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style> span{ font-size: 16px; } .box1{ width: 150px; height: 80px; ...
CSS样式—— 字体、元素的垂直水平居中
weixin_30642561的博客
04-14 106
1.CSS样式与HTML中标签属性的区别： 　　标签的属性是采用 属性名=“属性值” 表示的 　　CSS样式是采用名值对 属性名：属性值； 表示的 2.内联元素（行内元素）与块元素 　　（1）内联元素及其特点： 　　　 所谓的行内元素，指的是只占自身大小，不会独占一行常见的内联元素：　　　 a img iframe span span没有任何语...
css样式让字体居中,CSS样式—— 字体、元素的垂直水平居中
weixin_42168745的博客
08-03 792
1.CSS样式与HTML中标签属性的区别：标签的属性是采用 属性名=“属性值” 表示的CSS样式是采用名值对 属性名：属性值； 表示的2.内联元素(行内元素)与块元素(1)内联元素及其特点：所谓的行内元素，指的是只占自身大小，不会独占一行常见的内联元素：a img iframe spanspan没有任何语义，span标签专门用来选中文字，并对该文字设置样式对内联元素设置宽高是无效的，也不可以设置行...
微信小程序 align-items:center
易天海
04-08 5735
.w-balance-area { display:flex; padding:20rpx; align-items:center; } 去掉align-items:center的效果 .reward .reward-head{ display: flex; padding:30rpx; } .reward .reward-head .detail-text{ flex...
html5多行文字怎样垂直居中,如何使CSS单行及多行文字水平垂直居中
weixin_34401781的博客
07-08 973
一、单行文字1. line-height、text-align(兼容性ie6/7)CSS代码(为了节省空间，建议不要单行书写css样式).new{height:5em; line-height:5em; text-align:center; border:1px solid #ddd;}css及html2.display:flex、just-content：center、line-height...
CSS实现元素的水平居中、垂直居中、水平垂直居中
远方
03-19 144
1.元素的水平居中 <1>行内元素水平居中 利用text-align:center可以实现块级元素内部的行内元素的水平居中，此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效，如果内部是块级元素没有设置宽度，宽度会占满父级元素，内容也会居中。如果设置宽度内容会在子元素的宽度范围内居中，如果希望子元素相对父级内容居中，可以将...
外派蚂蚁金服笔.1A,B,C会占据整合body的宽度 所有元素内的文字垂直居中、水平居中。 虚线为元素边框示意线，不需要显示 字符串隐藏部分内容一位在末尾 实现一个 convert 函数,201
最新发布
weixin_61662162的博客
04-06 387
1.A,B,C会占据整合body的宽度。2.A宽度固定200px，C宽度固定150PX，B会占据剩余的所有宽度3.C永远吸附在页面的最顶部不随页面滚动而滚动，A\B会随页面滚动而滚动
CSS实现元素水平居中、垂直居中、水平垂直居中
Freya_yyy的博客
08-19 818
1.元素水平居中 1.1行内元素水平居中 像文本text、图像img、按钮等行内元素要实现水平居中，只需要给父元素设置text-align:center;即可。 .center{ text-align:center; } <div class="center">文本水平居中</div> 1.2块级元素水平居中 定宽块级元素的水平居中： 方法1：给...
Php弹性盒子属性,CSS3弹性盒子align-items属性之center垂直居中 - YangJunwei
weixin_33100285的博客
04-14 366
CSS3弹性盒子之align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。基本用法div{display:flex;align-items:center;}div 元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。完整示例CSS3弹性盒子align-items属性之cent...
HTML元素水平垂直居中实践与技巧
本文将深入探讨HTML元素在页面布局中如何实现水平和垂直居中对齐，主要关注两种常见的方法：CSS绝对定位和结合CSS与JavaScript或jQuery的解决方案。 首先，让我们从CSS绝对定位的角度来理解。在HTML中，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值