Question

我知道这已被问过很多次了，但到目前为止我已经尝试了很多东西。

我想在div中水平和垂直对齐一个img。

容器div在显示图片的模态内，一旦点击其预览。然后它将包含任何大小的图片。

我可以水平或垂直对齐，但不能同时对齐。

<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
    <div class="col-lg-1 col-md-1"></div>
    <div class="col-lg-10 col-md-10 col-sm-12 content">
        <div class="row content">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
            <div class="col-lg-12 col-md-12 col-sm-12 modal-content">
                <div class="row content">
                    <div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
                        <div class="row content">   



                                    <!-- pic here -->
                                    <img id="pic" src="">



                        </div>
                    </div>
                    <div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
                        <div class="row content">   
                            <div id="modaluserdata" class="col-lg-12">
                                <div class="row content">
                                    <div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">

                                    </div>
                                    <div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">

                                    </div>
                                </div>
                            </div>
                            <div id="modalsocial" class="col-lg-12">
                                <div class="row content">

                                </div>
                            </div>
                            <div id="modalcomments" class="col-lg-12">
                                <div class="row content">

                                </div>
                            </div>
                            <div id="modaltypecomment" class="col-lg-12">
                                <div class="row content">

                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

模态示例（img未垂直对齐）：https://ibb.co/j4nJ1Q

（。内容仅包含“height：inherit”，模态为550px）

谢谢！

Answer 1

使用Flexbox轻松：

＆＃13;

div.container{
  width: 500px;
  height: 400px;
  border: red dashed 2px;
  display: flex;
  justify-content: center;
  align-items : center;
}

＆＃13;

<div class="container">
  <img src="http://lorempixel.com/300/200/"/>
</div>

＆＃13;

如何在div中垂直和水平对齐img？

1 个答案: