弹性盒子的行高设置文字垂直居中

最新推荐文章于 2024-06-02 17:14:20 发布
最新推荐文章于 2024-06-02 17:14:20 发布
阅读量2.7k 收藏 2
点赞数
分类专栏： HTML CSS WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ckxkobe/article/details/84610340
版权
WEB前端 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
HTML
11 篇文章 0 订阅
订阅专栏
CSS
11 篇文章 0 订阅
订阅专栏

弹性盒子的行高设置文字垂直居中


行高设置居中对齐，是针对内容宽度
在CSS3的border-sizing模式下，是内减模式
所以要减去padding和border
要小心 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	div {
		/*width: 300px;*/
		/*height: 300px;*/
		width: 200px;
		height: 200px;
		background-color: pink;
		margin: 100px auto;
	}
	/*弹性盒子，文字显示在减去border和padding后的区域内，不是width
	content盒子，就是用width即可*/
	a {
		display: block;
		width: 200px;
		height: 200px;
		border: 70px solid red;
		line-height: 60px;
	}
	</style>
</head>
<body>
	<div>
		<a href="#">name</a>
	</div>
</body>
</html>
ckx_cxy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒布局-----指定水平方向与垂直方向上的对齐方式
暖心~的博客
01-04 1万+
首先介绍弹性盒布局中的一些术语的意思 main-axis：进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴 main-start/main-end：进行布局时的起点和终点。在横向布局时为容器的左端和右端，在纵向布局时为容器的顶端和底端。 cross-axis：与main-axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。 cross-start
CSS中实现弹性盒子水平垂直居中的方法
DCJwwh的博客
02-07 1578
为了实现响应式布局，使用flex弹性盒子，布局如下所示
css弹性盒子文本设置,CSS3 Flex 弹性盒模型与文本内容居中
weixin_31481495的博客
08-04 1343
实现文本水平和垂直居中的方法有很多，但都是通过各种技巧来实现，优劣点都会存在。CSS3 Flex 弹性盒模型在 IE11 及其他现代浏览器中已广泛支持，其丰富的功能和繁多的属性定义，使得入门起来有点抽象难懂。这里只通过示例简单介绍使用 CSS3 Flex 弹性盒布局方式，实现文本居中的方法。CSS 核心代码：display: flex;align-items: center;justify-con...
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
最新发布
m0_73560798的博客
06-02 1258
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
使用弹性盒实现垂直居中对齐
qq_63453268的博客
11-06 9674
<body> <div class="box"> <div class="con">我是2</div> </div> </body> 1.给两个div元素各设置一个宽高加上背景色，方便我们看，另外为了更清楚他们的位置关系，我们把外层的宽高设置的大一点，里面的元素不设大小，由内容撑开（但是如果没有内容，就一定要设大小，会直观一些） 层： .box { backgrou...
弹性盒子 Flex 子元素高度塌陷
weixin_30794491的博客
01-25 2077
弹性盒子 Flex 子元素高度塌陷 数据来源：https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局：· wrap 弹性布局，分 head、main；· head 弹性布局，分 h2、i ；问题：head 高度塌陷。高 32px，变成：24.03px...
关于在弹性盒子，图片和文字对齐居中
weixin_47119307的博客
05-20 1809
父盒子： display:flex justify-content:center align-items:center
CSS line-height行高上下居中垂直居中样式属性
12-08
常常使用line-height设置内容（图片、文字）行高上下居中样式效果。 一、line-height行高语法 复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%} line-...
实现DIV层内的文字垂直居中(单行文字/多行文字)
09-25
如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法
给行内块元素设置行高无法垂直居中.zip
10-25
在处理行内块元素（inline-block elements）时，我们可能会遇到一个常见的问题：无法通过设置行高（line-height）来实现元素的垂直居中对齐。本篇文章将深入探讨这个问题，并提供解决方案。 行内块元素是一种特殊的...
html弹性盒子自适应比例,使用弹性盒布局来实现元素宽度与高度的自适应
weixin_39568926的博客
06-16 1252
#container{display: -moz-box;display: -webkit-box;border: solid 1px blue;-moz-box-orient: horizontal;-webkit-box-orient:horizontal;width: 500px;height: 300px;}#text-a{background-color: orange;}#text-...
Css3 弹性盒子垂直居中
c_Yuan的博客
11-11 1万+
之前在做一个项目的时候，用到弹性盒子垂直居中，鉴于宽度固定，高度不定的缘故，加上里面用的img的src是动态替换的，客户给的图片高度不一致，导致垂直居中的时候，高度较小的图片把整个img的高度固定死了，而致使大图缩小了。找了下方法解决，其实只要把水平和垂直居中都设置，便可以在切换图片的同时，又能够使图片占满宽度。 .flexbox{
css弹性布局，自动换行，文本垂直水平居中
caimaomaocai的博客
03-31 1万+
/*父级*/ .location-box{ flex:1; background:#fff; display:flex; flex-wrap:wrap; /*换行*/ } /*子级*/ .location-box .one-item{ display:flex; ...
css 几种水平垂直居中的方法 及 弹性盒子
热门推荐
青梅煮酒论英雄的博客
06-29 1万+
弹性盒子；
居中的多种实现
Pluto_lei的博客
10-12 266
方法1 <div class="box"> <p>hello</p> </div> .box { width: 200px; height: 200px; border: 1px solid; display: grid; align-items: center; justify-items: center; } p { background: red; } 方法2（掌握） <div class="box">
未知div宽度高度使div水平垂直居中（弹性盒子方法）
VarIInJSon的博客
10-14 1万+
不使用js的情况下有三种方法： 1、css3弹性盒子flexbox 2、display:table-cell; 3、transform:translate(); 在这介绍一下css3的弹性盒子内容，对该属性了解的可以直接下拉看红色分割线下的水平垂直居中的方法： 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 di
盒子居中弹性布局
qq_39743131的博客
03-17 2047
1.将盒子居中： 1.知道小盒子的宽高：left :50%，margin-left：-（小盒子的一半的宽度） 2.不知道小盒子的宽度：left：50%  transfrom:translate:(-50%);2.弹性布局：（默认只有一行  开启换行：flex-wrap:wrap就不可以用align-items进行设置了。       可以用align-content来代替（注意只对多行管用））  ...
grid 网格中的内容上下居中_前端 CSS Grid 网格布局指南「下」
weixin_33618482的博客
12-05 2922
引言在上篇文章中，对 CSS Grid 布局做了一个简短的介绍，不难看出它非常强大，但要使用好它，还需要学习更多的知识，本文章将介绍 CSS Grid 的各种属性。本文有些枯燥，我自己都没有耐性一口气读完它，但要想将 Grid 运用得心应手，还要不断的记忆和练习，本文以总结属性形式呈现，可以把它当做一份文档收藏，以便需要时查阅。如果您还没有了解 CSS Grid ，请先阅读《前端 CSS Grid...
弹性盒布局方法示例
Mr_qinyivue的博客
09-20 302
弹性盒多布局方法 1.flex-direction：row; 默认x主轴 column 为y轴 ，row-reverse x轴为主轴，并反向排列 ，column-reverse Y轴为主轴并反向排列。 2.主轴对齐方式 justify-content: center 居中 space-between 两端对齐 space-around 自动间距对齐，flex-start开始位置 flex-end 结束位置 3.侧轴对齐方式 align-items 属性值常用center 居中 ，fl
父盒子高度百分比怎么设置行高居中
03-30
可以使用以下 CSS 属性设置父盒子高度百分比并居中行高： ``` .parent { height: 50%; /* 设置父盒子高度为 50% */ display: flex; /* 使用 flex 布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ line-height: 1.5; /* 设置行高为 1.5 */ } ``` 以上 CSS 代码中，通过 `height: 50%;` 设置了父盒子高度为 50%，然后使用 flex 布局的 `justify-content: center;` 和 `align-items: center;` 分别实现了水平和垂直居中，最后通过 `line-height: 1.5;` 设置了行高为 1.5。这样就可以在父盒子高度百分比的情况下，同时实现居中和设置行高。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值