Question

我有两个图像图像，我无法解决如何在我的容器中心对齐，我尝试使用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>

Answer 1

Sse the css

.fadehover{text-align:center !important; display:block;}

在Bootstrap中对齐多个图像

1 个答案: