我正在為一個(gè)小型咨詢團(tuán)隊(duì)創(chuàng)建一個(gè)單頁網(wǎng)站，在團(tuán)隊(duì)出現(xiàn)的部分中，我無法將合理的內(nèi)容與我想添加到文本頂部的圖像對齊。這是我所擁有的超文本標(biāo)記語言<section> <h2 class="altura">Equipo</h2> <div class="container"> <div class="teamg"> <img class="fotoequipo" src="img/brad1.jpg"> <h3>Ps. Brad Pitt</h3> <h4>Associate</h4> <p>Lorem ipsum.</p> </div> <div class="teamg2"> <img class ="fotoequipo1" src="img/jen1.jpg"> <h3>Ps. Jennifer Aniston</h3> <h4>Associate</h4> <p>Lorem Ipsum.</p> </div> </div></section>CSS.altura { margin: 3vw 20vw 3vw 20vw;}.container { display: grid; grid-template-columns: 20% 20% 20% 20% 20%;}.teamg { grid-column-start: 2;}.teamg img { align-content: center; height: 180px; width: 180px; border-radius: 50%; border: 5px solid #2b2c35;}.fotoequipo { align-items: center; height: 180px; border-radius: 50%; border: 5px solid #2b2c35;}.teamg2 { grid-column-start: 4;}.teamg2 img { align-content: center; height: 180px; width: 180px; border-radius: 50%; border: 5px solid #2b2c35;}
3 回答
侃侃無極
TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊
因此，如果我理解正確的話，您對圖像下方文本的對齊方式不滿意 - 因?yàn)樗翱雌饋怼辈痪又小?/p>
它實(shí)際上完全居中，但文本右對齊 - 并且圖像是全寬。
這是 css/html 的整理版本 - 也許這會(huì)有所幫助。
.altura {
margin: 3vw 20vw 3vw 20vw;
}
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
.teamg {
grid-column-start: 2;
box-shadow: 0 0 5px grey;
padding: 5px;
min-width: 200px;
text-align: center;
}
.teamg img {
align-content: center;
height: 180px;
width: 180px;
border-radius: 50%;
border: 5px solid #2b2c35;
}
.column4 {
grid-column-start: 4;
}
<section>
<h2 class="altura">Equipo</h2>
<div class="container">
<div class="teamg">
<img src="https://via.placeholder.com/180">
<h3>Ps. Brad Pitt</h3>
<h4>Associate</h4>
<p>Lorem ipsum.</p>
</div>
<div class="teamg column4">
<img src="https://via.placeholder.com/180">
<h3>Ps. Jennifer Aniston</h3>
<h4>Associate</h4>
<p>Lorem Ipsum.</p>
</div>
</div>
</section>
飲歌長嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
<center>
<img src="path/to/your/image/here"/>
</center>
<style>
img{
object-fit:center;
}
</style>
- 3 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報(bào)
0/150
提交
取消