我有两个图像图像,我无法解决如何在我的容器中心对齐,我尝试使用text-align和justify-content但似乎没有任何工作。对于我的导航栏来说,这是相同的,我不知道如何将文本对齐,但是将标识保留在栏的左侧,我会将文本对齐?感谢
<style>
.buttons-1{
background-color: darkgray;
padding-top: 30px;
text-align: center;
}
.row-1{
background-color: ghostwhite;
}
.photography {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.fadehover:hover img {
opacity: 0.3;
}
.fadehover:hover .middle {
opacity: 1;
}
.text {
background-color: gray;
color: greenyellow;
font-size: 16px;
padding: 16px 32px;
}
.col-md-3{
padding: 0;
}
.container-fluid {
height:100%;
min-height: 100%;
}
.row{
width:100%;
margin:0;
padding:0;
height:100%;
}
</style>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="Photos/logowhite.png" alt="logo" style="width:40px;"></a>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="photography.html">Photography</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<div class="container-fluid buttons-1 ">
<div class="row ">
<div class="col-md-3 d-none d-md-block photography fadehover">
<a href="photography.html">
<img src="Photos/Buttons/photography%20button.png" alt="Photography" class="img-fluid photography"/>
<div class="middle">
<div class="text">Photography</div>
</div>
</a>
</div>
<div class="col-md-3 d-none d-md-block photography fadehover">
<a href="photography.html">
<img src="Photos/Buttons/photography%20button.png" alt="Photography" class="img-fluid photography"/>
<div class="middle">
<div class="text">Other</div>
</div>
</a>
</div>
</a>
</div>
</div>
</div>
答案 0 :(得分:0)
Sse the css
.fadehover{text-align:center !important; display:block;}