在開發一款wordpress主題時有個需求，就是讓兩個塊中的一個塊里的字變大，為了美觀，字要居中線對齊
在開發一款wordpress主題時有個需求，就是讓兩個塊中的一個塊里的字變大，為了美觀，字要居中線對齊，
如下圖：
我寫了個例子，如下圖：
例子的代碼：
<!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布局