html – 如何将图像置于容器的中心(Bootstrap)？

2023年11月22日 192次阅读

我正在为网站制作一个团队部分.它应该有4列(4个团队成员),在列下面会有一个短文本.然后,当我点击团队成员的照片时,会打开一个模态并提供其他说明.

到目前为止一切正常,但团队成员的图像不在中心.出于某种原因,我不能使用文本中心或中心块类来定位它们(​​我正在使用Bootstrap 3).这非常重要,因为网站具有响应性,因此如果照片上的人在某些分辨率中只有“一半”可见(如下面的屏幕截图),那么它看起来并不好看.

《html – 如何将图像置于容器的中心(Bootstrap)？》

感谢大家阅读和帮助我！

这是我到目前为止(HTML& CSS)：

<div id="team" class="container">

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2 class="specialheadingtextportfolio">T</h2>
            <div class="specialheadingportfolio"><span class="lightblue">&lt/</span>Team<span class="lightblue">&gt</span></div>
        </div>
    </div>

    <div class="col-md-12">

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="columns portfolio-item">
                <div class="item-wrap">
                    <a href="#modal-01" title="">
                        <img alt="" src="img/asianwoman.jpg">
                        <div class="overlay">
                            <div class="portfolio-item-meta">
                                <h5>Jane Doe</h5>
                                <p>Web Designer</p>
                            </div>
                        </div>
                        <div class="link-icon"><i class="fa fa-plus"></i></div>
                    </a>
                </div>
            </div>
            <div class="teamtext">
                <h3 class="teamtextheading">Jane Doe</h3>
                <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="columns portfolio-item">
                <div class="item-wrap">
                    <a href="#modal-02" title="">
                        <img alt="" src="img/m2.jpg">
                        <div class="overlay">
                            <div class="portfolio-item-meta">
                                <h5>Jane Doe</h5>
                                <p>Web Designer</p>
                            </div>
                        </div>
                        <div class="link-icon"><i class="fa fa-plus"></i></div>
                    </a>
                </div>
            </div>
            <div class="teamtext">
                <h3 class="teamtextheading">Jane Doe</h3>
                <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="columns portfolio-item">
                <div class="item-wrap">
                    <a href="#modal-03" title="">
                        <img alt="" src="img/girl.jpg">
                        <div class="overlay">
                            <div class="portfolio-item-meta">
                                <h5>Jane Doe</h5>
                                <p>Web Designer</p>
                            </div>
                        </div>
                        <div class="link-icon"><i class="fa fa-plus"></i></div>
                    </a>
                </div>
            </div>
            <div class="teamtext">
                <h3 class="teamtextheading">Jane Doe</h3>
                <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="columns portfolio-item">
                <div class="item-wrap">
                    <a href="#modal-04" title="">
                        <img alt="" src="img/beach.jpg">
                        <div class="overlay">
                            <div class="portfolio-item-meta">
                                <h5>Jane Doe</h5>
                                <p>Web Designer</p>
                            </div>
                        </div>
                        <div class="link-icon"><i class="fa fa-plus"></i></div>
                    </a>
                </div>
            </div>
            <div class="teamtext">
                <h3 class="teamtextheading">Jane Doe</h3>
                <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
            </div>
        </div>

   </div>

#portfolio-wrapper .columns {
margin-bottom: 36px;
}
.portfolio-item .item-wrap {
   height: 450px;
   width: auto;
   overflow: hidden;
   position: relative;

   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
   display: block;
   cursor: pointer;
}

/* overlay */
.portfolio-item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

   background: rgba(28, 147, 216, 0.9);
}
.portfolio-item .item-wrap .link-icon {
   display: block;
   color: #fff;
   height: 30px;
   width: 30px;
   font-size: 24px;
   line-height: 30px;
   text-align: center;

   opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -15px;
   margin-top: -15px;
}
.portfolio-item .item-wrap img {
   vertical-align: bottom;
}
.portfolio-item .portfolio-item-meta { padding: 0px }
.portfolio-item .portfolio-item-meta h5 {
   font-size: 22px;
   font-family: 'Lato', sans-serif;
   font-weight: bold;
   padding-top: 40%;
   color: #fff;
}
@media only screen and (min-width:1600px){
    .portfolio-item .portfolio-item-meta h5 {
        padding-top: 30%;
    }
}
.portfolio-item .portfolio-item-meta p {
   font-size: 16px;
   font-family: 'Lato', sans-serif;
   color: #eaf2e3;
   margin-bottom: 0;
}

/* on hover */
.portfolio-item:hover .overlay {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
   opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}

.teamtext{
    background: #464747;
    color: #fff;
    padding: 30px 15px;
    margin-bottom: 70px;
    display: block;
}
.teamtextheading{
    padding-top: 0px;
    margin-top: 0px;
}

最佳答案 我认为你可以使图像相对并给出一些位置来使图像居中.结果将始终显示在图像的中心,并在必要时裁剪两侧(右侧和左侧).

.portfolio-item .item-wrap img {
   position: relative;
   left: 50%;
   -ms-transform: translateX(-50%); /** old IE **/
   -webkit-transform: translateX(-50%); /** iOS safari ***/
   transform: translateX(-50%);
}
点赞