【问题标题】:How to horizontally align an image inside a div comparing to another div in bootstrap 3.0?与 bootstrap 3.0 中的另一个 div 相比,如何水平对齐 div 内的图像?
【发布时间】:2016-01-04 19:37:36
【问题描述】:

假设我在 bootstrap 的一列中拍摄了一张图片并在另一列中拍摄了文本,现在想要将该图片对齐在该 div 的中间(垂直和水平)。怎么做?

我的代码是:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="pia-icon-performance.png" class="img-responsive">
        </div>

        <div class="col-md-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</div>

图像与文本不在中心。请帮忙

【问题讨论】:

    标签: css image twitter-bootstrap-3


    【解决方案1】:

    你搞砸了你的利润吗?

    我假设如果你得到容器的高度减去图像的高度除以 2 并将其添加到 css 中的 margin-top

    img{
    margin-top:100px;}
    

    【讨论】:

    • 感谢帕特里克,但如果 div 高度未知(根据文本量,div 会大或小)那么如何将其与图像 div 对齐?
    猜你喜欢
    • 1970-01-01
    • 2012-08-23
    • 2014-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多