我正在嘗試使用 Flexbox 將頁(yè)面左側(cè)的元素垂直居中，但無(wú)法弄清楚。它們是通過(guò) flex-direction: column 組織的，我不確定設(shè)置后如何水平居中。請(qǐng)參閱下面的我的代碼和到目前為止我的網(wǎng)站的實(shí)時(shí)版本。我將兩個(gè)彈性容器分成左右兩部分，這樣我就可以分別處理它們并將它們居中。目前我只處理左側(cè)。因此，我將首先展示它的 CSS。我嘗試過(guò) align-items、justify-content 和 align-self，但這些都不起作用。提前致謝！實(shí)時(shí)網(wǎng)站：https://huddle-single-landing-page.jordanchude.now.sh/超文本標(biāo)記語(yǔ)言<div class="container"><div class="left-side"> <img id="huddle" src="https://i.ibb.co/FnJS8vM/logo.png" alt="logo" border="0"> <img id="illustration" src="https://i.ibb.co/L9HBmDZ/illustration-mockups.png" alt="illustration-mockups" border="0"></div><div class="right-side"> <p id="headline">Build The Community Your Fans Will Love</p> <p id="subtitle"> Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion. </p> <button>Register</button> <div class="social-icons"> <span class="fa-stack fa-lg"> <i class="far fa-circle fa-stack-2x"></i> <i class="fab fa-facebook-f fa-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="far fa-circle fa-stack-2x"></i> <i class="fab fa-twitter fa-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="far fa-circle fa-stack-2x"></i> <i class="fab fa-instagram fa-1x"></i> </span> </div></div>CSS .container { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;}/* Left Side */.left-side { display: flex; flex-direction: column; width: 800px;}#huddle { width: 200px; align-self: flex-start; }#illustration { width: 100%; }
1 回答
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
您的容器中沒有額外的高度，因此沒有用于居中的可用空間。
進(jìn)行此調(diào)整：
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center */ /* vertically centers both left and right elements */
flex-wrap: wrap;
height: 100vh; /* child would inherit height through align-content: stretch default */
}
.left-side {
display: flex;
flex-direction: column;
width: 800px;
align-self: center; /* vertically centers the flex item */
/* justify-content: center; */ /* vertically centers the content of the flex item */
}
- 1 回答
- 0 關(guān)注
- 176 瀏覽
添加回答
舉報(bào)
0/150
提交
取消