Question

我在页面上有两个部分。我无法垂直对齐其内容。我正在使用vertical-align:middle但无法执行此操作。我也尝试了display:flex，但这会在响应式视图中产生问题。

这是结构：

<div class="container-fluid" style="display:table;width:100%;">
        <div class="row" style="display: table-cell;vertical-align:middle;">
            <div class="col-lg-9 section_1">
                <div class="logo hidden-xs">
                    <img src="custom_images/logo.png" />
                </div>
                <div class="realtor">
                    <img src="custom_images/realtors-profileimg.png" width="70" height="70" />
                </div>
                <div class="name & number">
                    <span>Sohil shah</span>
                    <span>+91-972-255-2874</span>
                </div>
                <div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
                <div class="phone_number hidden-xs">080-888-0888</div>
                <<div class="powered_by hidden-xs">
                    <img src="custom_images/powerdby-logo.png" />
                </div>
            </div>
            <div class="col-lg-3 section_2" style="height:70px;">
                <!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
                <div class="logo">
                    <img src="custom_images/logo.png" />
                </div>
                <div class="name & number">
                    <span>Sohil shah</span>
                    <span>+91-972-255-2874</span>
                </div>
            </div>
        </div>
    </div>

风格就在这里......

.row > div
{
    display: table-cell;
    vertical-align: middle;
}

.section_1 > div
{
    display: inline-block;
}

.section_2 > div
{
    display: inline-block;
}

img
{
    max-width: 100%;
    max-height: 100%;
}

这是问题的屏幕截图......

Answer 1

HTML <<div class="powered_by hidden-xs">

中有错误

以下是修正版https://jsfiddle.net/kjp91hko/2/

<div class="container-fluid" style="display:table;width:100%;">
    <div class="row" style="display: table-cell;vertical-align:middle;">
        <div class="col-lg-9 section_1">
            <div class="logo hidden-xs">
                <img src="custom_images/logo.png" />
            </div>
            <div class="realtor">
                <img src="custom_images/realtors-profileimg.png" width="70" height="70" />
            </div>
            <div class="name & number">
                <span>Sohil shah</span>
                <span>+91-972-255-2874</span>
            </div>
            <div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
            <div class="phone_number hidden-xs">080-888-0888</div>
            <div class="powered_by hidden-xs">
                <img src="custom_images/powerdby-logo.png" />
            </div>
        </div>
        <div class="col-lg-3 section_2" style="height:70px;">
            <!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
            <div class="logo">
                <img src="custom_images/logo.png" />
            </div>
            <div class="name & number">
                <span>Sohil shah</span>
                <span>+91-972-255-2874</span>
            </div>
        </div>
    </div>
</div>

如何垂直对齐不同内容的div？

1 个答案: