我正在為一個小型咨詢團隊創建一個單頁網站，在團隊出現的部分中，我無法將合理的內容與我想添加到文本頂部的圖像對齊。這是我所擁有的超文本標記語言<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貢獻2051條經驗 獲得超10個贊
因此，如果我理解正確的話，您對圖像下方文本的對齊方式不滿意 - 因為它“看起來”不居中。
它實際上完全居中，但文本右對齊 - 并且圖像是全寬。
這是 css/html 的整理版本 - 也許這會有所幫助。
.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貢獻1951條經驗 獲得超3個贊
<center>
<img src="path/to/your/image/here"/>
</center>
<style>
img{
object-fit:center;
}
</style>
- 3 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消