Question

我有这个样本：

我想将第二个div对齐为第一个div的中间...我尝试使用vertical-align:middle执行此操作但不起作用。

这是因为我们放了容器display: table？

代码HTML：

<div class="container-logo">
    <div class="logo">LOGO</div>
    <div class="profile-name">NAME</div>
</div>

CODE CSS：

.container-logo {
    display: table;
    margin: 0 auto;}

.logo{
        clear: none;
    float: left;
    height: 57px;
    width: auto;
    background:red;
}

.profile-name{
    float: left;
    width: auto;
    color: blue;
    /* line-height: 22px; */
    font-size: 14pt;
    background:aqua;
    font-family: Montserrat regular;
}

它有什么问题不起作用......你能给我一些建议吗？

提前致谢！

修改

我的物品必须排成一行并且高度相同......我只想让第二个div放在第一个中间......完全相同的高度

Answer 1

尝试从.logo类中移除float：left，使用.profile-name移除display:table-cell将帮助您解决此问题..如下所示

<强> CSS

.logo{
        clear: none;
    display:table-cell;
    vertical-align:middle;
    height: 57px;
    width: auto;
    background:red;
}

.profile-name{
    display:table-cell;
    vertical-align:middle;
    width: auto;
    color: blue;
    /* line-height: 22px; */
    font-size: 14pt;
    background:aqua;
    font-family: Montserrat regular;
}

Fiddle Demo

Answer 2

<div class="container-logo">

替换班级名称。

＆＃13;

    .container-logo {
    display: table;
    margin: 0 auto;
    vertical-align: middle;
}


.logo{
    clear: none;
    /*float: left;*/
    height: 57px;
    width: auto;
    background:red;
    display: table-cell;
    vertical-align: middle;
}

.profile-name{
    /*float: left;*/
    width: auto;
    
    /* line-height: 22px; */
    
    font-family: Montserrat regular;
    display: table-cell;
    vertical-align: middle;
}
.profile-name p{
    font-size: 14pt;
    background:aqua;
    color: blue;
    padding:2px;
    
}

＆＃13;

<div class="container-logo">
    <div class="logo">LOGO</div>
    <div class="profile-name">
        <p>NAME</p>
    </div>
</div>

＆＃13;

Answer 3

对内部div使用table-cell并删除浮点数：

.container-logo {
    display: table;
    margin: 0 auto;
}

.logo{
        clear: none;
    /* float: left; */
    height: 57px;
    width: auto;
    background:red;
}

.profile-name{
    /* float: left; */
    width: auto;
    color: blue;
    /* line-height: 22px; */
    font-size: 14pt;
    background:aqua;
    font-family: Montserrat regular;
}
.container-logo > div{
    display: table-cell;
    vertical-align: middle;
}

<div class="container-logo">
    <div class="logo">LOGO</div>
    <div class="profile-name">NAME</div>
</div>

如果您希望得到this fiddle，请使用内联阻止。

Answer 4

如果你想要你的第二个div在第一个内部，那么写这样的html

<div class="container-logo">
 <div class="logo">LOGO
   <div class="profile-name">NAME</div>
 </div> 
</div>

并在你的CSS中做这样的事情

.container-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    max-width: 50%;
    padding: 15px;
}

.logo{
    clear: none;
    float: left;
    height: 57px;
    width: auto;
    background:red;
}

https://jsfiddle.net/hq8q8eqg/7/

这个div如何与中间对齐？

4 个答案: