目標效果圖：目前差距還有點遠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
*{
background-color: red;
background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
.top{
position:relative;
height: 180px;
display: flex;
}
.top .img{
height: 80px;
width: 80px;
}
.content{
margin: 50px;
}
.content .f-row{
display: flex;
margin-top: 10px;
flex-wrap:nowrap;
flex-direction: row;
text-align: center;
justify-content: space-between;
}
.rect{
text-align: center ;
border-width: 1px;
border-style: solid;
border-color: rgb(255, 255, 255);
width: 30%;
height: 0;
padding-bottom: 30%;
}
.w-rect{
border-width: 1px;
border-style: solid;
border-color: rgb(255, 255, 255);
width: 65%;
height: 0;
padding-bottom: 30%;
}
.content .s-row{
display: flex;
flex-direction: row;
flex-wrap:nowrap;
text-align: center;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="top">
<img src="https://profile.csdnimg.cn/3/2/4/1_nana_aoe">
<span>注冊/登錄</span>
</div>
<div class="content">
<div class="f-row">
<div class="rect">還款</div>
<div class="rect">辦卡</div>
<div class="rect">分期</div>
</div>
<div class="s-row">
<div class="w-rect">額度</div>
<div class="rect">搜索</div>
</div>
</div>
</body>
</html>
待解決問題： 1、文字豎直居中
2、如何從指定位置開始布局
uj5u.com熱心網友回復：
1、文字豎排可以使用 css 的 writing-mode 屬性https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode
2、從指定位置布局 什么意思？
uj5u.com熱心網友回復：
給div定位uj5u.com熱心網友回復：
請在我的代碼上修改一下，感覺沒有起作用。
如圖，注冊和登錄功能是在中間偏靠下的位置開始布局的。這個怎么處理
uj5u.com熱心網友回復：
！~~~~
你給的這個屬性應該是文字排向，我現在需要的是文字豎直居中，例如我的示例圖
uj5u.com熱心網友回復：
目前的問題有點尷尬，再詳細說明一下我的問題1、使用指定寬和高的正方形內部，可以使文字上下居中
2、使用
.rect{
border-width: 1px;
border-style: solid;
border-color: rgb(255, 255, 255);
width: 30%;
height: 0;
padding-bottom: 30%;
}構造動態正方形，文字上下居中就失去效果。
請各路英豪，幫我解決一下，即按比例設定正方形大小，又能在正方形內部居中顯示文字
uj5u.com熱心網友回復：
完全不明白你是哪里不滿意……注冊登錄那塊沒在下面？
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
問題1：最外圍層（top和content外面應該被包裹在一個層內）：style="position:absolute;bottom:20px;"就從下面開始了問題2：
你的rect加上：flex-direction:column;text-align:center;align-items:center;justify-content: center;
然后它內部應該和兩個子元素，分別對應圖示和文本
我說的是基于
uj5u.com熱心網友回復：
問題1：文字如何豎直居中答：通常的做法是設定line-height設定與高度實作，
div {
height: 50px;
line-height: 50px;
}
也可以給盒子設定為flex，然后通過align-items設定為center實作居中
div {
display: flex;
align-items: center;
}
不過看了下你的代碼，雖然不知道你為什么使用padding-bottom，高度還設定為0，但是要實作文字居中的話可以用定位,盒子里的文字用text標簽套起來然后使用定位實作
.rect {
position: relative;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: rgb(255, 255, 255);
width: 30%;
height: 0;
padding-bottom: 30%;
}
.rect text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
問題2：如何從指定位置開始布局
這個問題可以使用margin-top或者padding-top，也可以像你說的那樣在上面多加個div然后設定高度(不過不是很建議)，也可以使用定位，在最外層套個div，然后設定定位，按照你上面提的需求的話定位沒有硬性要求要使用什么，relative或者absolute都行
div {
position: relative;
top: 50%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/223505.html
標籤：HTML(CSS)