在開發(fā)一款wordpress主題時(shí)有個(gè)需求，就是讓兩個(gè)塊中的一個(gè)塊里的字變大，為了美觀，字要居中線對(duì)齊
在開發(fā)一款wordpress主題時(shí)有個(gè)需求，就是讓兩個(gè)塊中的一個(gè)塊里的字變大，為了美觀，字要居中線對(duì)齊，
如下圖：
我寫了個(gè)例子，如下圖：
例子的代碼：
<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<title>文章居中變大 - flex</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="box">
<div class="box-one">Npcink</div>
<div class="box-two">我是文字二</div>
</div>
<style>
.box {
overflow: hidden;
padding: 20px;
width: 500px;
margin: 0 auto;
border: 2px solid;
}
.box-one {
float: left;
border: 1px solid blue;
}
.box-two {
float: right;
border: 1px solid red;
}
/*我們先讓Npcink變大*/
.box-one {
font-size: 50px;
}
/*居中的核心*/
.box {
display: flex;
align-items: center;
}
.box-one {
flex: 1;
}
</style>
</body>
</html>其中的核心代碼是：
/*居中的核心*/
.box {
display: flex;
align-items: center;
}
.box-one {
flex: 1;
}這里用到了flex布局