[英]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.