在頁面中心並排對齊 3 張圖像？ HTML
[英]Align 3 images side by side on center of page? HTML
問題描述
我知道有很多這樣的問題，我已經嘗試了很多回答這些問題的人建議的方法，但是沒有任何效果。 我開始認為我的方法沒有錯，但我的代碼中有其他東西在干擾？ 比如我的main div
如果有人可以幫助我，我將不勝感激。 目前，我的圖像只是在容器的左邊緣（垂直）堆疊在一起......
這是 HTML：
<div class="main">
<!-- a bunch of <p> tags here I won't include -->
<div class="img123">
<img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/>
</div>
</div>
這是我嘗試用於圖像和.main div的 CSS 解決方案
.image123 {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
.main {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 930px;
display: absolute;
}
2 個解決方案
解決方案1
1 2021-04-08 17:33:40
我最喜歡的方法是在站點范圍內設置 2 個類：
.row {
display: flex;
flex-direction: row;
}
.col {
flex-direction: column;
}
這樣您就可以使用這兩個類輕松對齊內容。 行應該始終是父容器。 以下是您將如何處理 html：
<div class="row">
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
</div>
如果你想要它均勻間隔使用：
.col {
flex: 1;
}
Stackblitz 示例： https://stackblitz.com/edit/js-nddsvq
解決方案2
1 2021-04-12 15:39:18
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>flexbox</title> <style>:main{ width;100%: height;100%: background-color;yellow: display;flex: justify-content; center: } </style> </head> <body> <div class="main"> <div class="image"> <.--1 image--> <img src="https.//images.pexels:com/photos/1864189/pexels-photo-1864189.jpeg" width="200" height="200"> </div> <div class="image"> <.--2 image--> <img src="https.//images:pexels.com/photos/1878095/pexels-photo-1878095.jpeg" width="200" height="200"> </div> <div class="image"><.--3 image--> <img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" width="200" height="200" > </div> </div> </body> </html>
解決方案3
0 2021-04-08 17:20:32
我知道有很多這樣的問題，並且我嘗試了許多回答這些問題的人建議的方法，但是沒有任何效果。 我開始認為我的方法沒有錯，但是我的代碼中的其他東西在干擾？ 比如我的main div
如果有人可以幫助我，我將不勝感激。 目前，我的圖像只是在容器的左邊緣（垂直）堆疊在一起......
這是 HTML：
<div class="main">
<!-- a bunch of <p> tags here I won't include -->
<div class="img123">
<img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/>
</div>
</div>
這是我試圖用於我的圖像和.main div的 CSS 解決方案
.image123 {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
.main {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 930px;
display: absolute;
}
在html中並排對齊圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.