![](/img/trans.png)
[英]How do I vertically center li navigation menu but horizontally align it to the right while keeping logo icon horizontally aligned left and ctrd vert?
[英]How to align photos horizontally that was previously aligned vertically?
我正在“轉換”一個響應迅速的網站,並且需要在水平對齊3張圖像(以前在移動設備上垂直對齊)方面需要幫助。 我已經閱讀了一些StackOverflow帖子,但是找不到適合我的解決方案。
查看JSFiddle: https ://jsfiddle.net/8dkgcyfq/1/
<section class="team">
<div>
<img src="img/lady.jpg">
<h2>Navn Navnesen</h2>
<h1>contact@gmail.com</h1>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
<div>
<img src="img/lady.jpg">
<h2>Navn Navnesen</h2>
<h1>contact@gmail.com</h1>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
<div>
<img src="img/lady.jpg">
<h2>Navn Navnesen</h2>
<h1>contact@gmail.com</h1>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</section>
@media only screen and (min-width: 1000px) {
.team img {
width: 25%;
height: auto;
display: block;
padding-top: 20px;
}
.team {
text-align: center;
}
.team h2 {
font-family: "Catamaran";
font-size: 20px;
color: white;
font-weight: 300;
text-align: center;
padding-top: 20px;
}
.team h1 {
font-family: "Catamaran";
font-size: 15px;
color: white;
font-weight: 300;
text-align: center;
padding-top: 5px;
}
.team i {
font-size: 25px;
color: white;
padding-top: 10px;
}
}
需要一些將這些照片水平對齊的幫助。
根據我的評論,我將使用flexbox和移動優先的方法,這意味着您只需要更改媒體查詢的寬度即可:
/* put all default styleing outside media query */ .team { display:flex; flex-direction:row; flex-wrap:wrap; } /* I always do mobile first then media query tablet and above */ .team > div { /* personally, I would give these divs a class instead of having to do a bare selector (the slowest of all element selectors) */ width:100%; } @media only screen and (min-width: 1000px) { .team > div { width: 25%; } }
<section class="team"> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> </section>
您可以在.team
上使用display:flex
。 在移動設備上(默認設置),您可以使用flex-direction : column
因此圖像在垂直flex-direction : column
彼此垂直。
在媒體查詢中(要在其中進行更改),請使用flex-direction: row
。 這樣,圖像(divs)將排成一行並從那里樣式化。
檢查下面的jsfiddle或代碼段。 讓我知道這是否對您有幫助。
.team { display: flex; flex-direction: column; } @media only screen and (min-width: 1000px) { .team img { width: 100%; height: auto; display: block; padding-top: 20px; } .team { text-align: center; flex-direction: row; } .team h2 { font-family: "Catamaran"; font-size: 20px; color: white; font-weight: 300; text-align: center; padding-top: 20px; } .team h1 { font-family: "Catamaran"; font-size: 15px; color: white; font-weight: 300; text-align: center; padding-top: 5px; } .team i { font-size: 25px; color: white; padding-top: 10px; } }
<section class="team"> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> </section>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.