Question

我无法使用id="pop_ctrl"在其父DIV中间将id="ops"转移到vertical-align:middle。我试过<div style="float:left;display:inline-block"> <div id="ops" class="utilities_div" data-type="0">   <div style="display: block; color: white; cursor: pointer;" id="pop_ctrl"><i class="fa fa-plus"></i>  Add Data</div> <ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul"> <li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li"> <div><i class="fa fa-sort-numeric-asc"></i> </div>   <div>Number</div> </li> </ul> </div> </div>，但它不起作用。这是我的HTML：

.utilities_div {
    display: inline-block;
    background-color: black;
}
#demo_ul {
    position: absolute !important;
    top: 0px;
    margin: 0px;
    background-color:white;
}
.demo_li {
    word-wrap: break-word;
    padding: 10px;
    background-color: red
}

这是我的CSS：

Name                       Price            Pack Size
Aciclovir 200 mg Tablets     3.50             25
Aciclovir 400 mg Tablets     4.20             56
Aciclovir 800 mg Tablets     5.40             35
ACICLOVIR CREAM              2.40             GM

这就是它的小提琴：http://jsfiddle.net/4szk1y2d/

Answer 1

请尝试以下操作： Demo

#pop_ctrl {
    height:44px;
    line-height:44px;
    vertical-align:middle;
    display: block;
    color: white;
    cursor: pointer;
    padding:0 6px;
}

删除所有nbsp's而不是使用填充

Answer 2

<style>
.utilities_div {
    background-color: black;
}
#demo_ul {
    position: absolute !important;
    top: 0px;
    margin: 0px;
    background-color:white;
}
.demo_li {
    word-wrap: break-word;
    padding: 10px;
    background-color: red
}
</style>

<div style="float:left; height:auto;">
    <div id="ops" class="utilities_div" data-type="0">
        <div style="display: initial; color: white; cursor: pointer; padding:5px;" id="pop_ctrl">
            <i class="fa fa-plus"></i>Add Data
     </div>
        <ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
            <li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
                <div><i class="fa fa-sort-numeric-asc"></i>
                </div>
                <div>Number</div>
            </li>
        </ul>
    </div>
</div>

Answer 3

在CSS中进行以下更改：

div#ops { display : table}
div#pop_ctrl {display: table-cell; padding: 10px}

从html中删除  

Answer 4

试试这个演示，它可能对你有帮助。

HTML

<div id = "mainDiv">
    <div id="childDiv"></div>
</div>

CSS

#mainDiv{
height:300px;
width:300px;
background : yellow;
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#childDiv{
height:100px;
width:100px;
background : red;
display: inline-block;
}

http://jsfiddle.net/pvodtgrk/

Answer 5

删除display：block;来自#pop_ctrl并应用display：table-cell; vertical-align仅适用于具有适当显示属性的元素，例如display：inline-block或table-cell。

工作代码 http://jsfiddle.net/4szk1y2d/1/

将此添加到您的CSS

#ops {
    display: table;
    height: 36px;
}
#pop_ctrl {
    display: table-cell !important;
    vertical-align: middle;
}

无法将DIV从父DIV的底部移到中间

5 个答案: