在垂直对齐div中填充顶部到h1

时间:2016-12-21 15:17:01

标签: css

我有一个具有特定高度的div,内部的内容根据高度调整VERTICALLY现在我做的是我将属性display-table;添加到父div,display: table-cell;vertical-align: middle;添加到子div会发生什么事情是我的div垂直对齐并且看起来不错但是孩子里面的h1并不完全像对齐那样按钮我认为添加一些填充顶部或边缘顶部可能会解决问题但是它不接受其中任何一个这里是我的代码

HTML

<div class="all-smiles" id="parent">
    <div id="child">
    <div class="container" align="center">
        <div class="row">
                <h1>All Smiles Welcome</h1>
                <button>BOOK AN APPOINTMENT</button>
            </div>
        </div>
    </div>
</div>

CSS

#parent {
    display: table;
    width: 100%;
    height: 250px;
}
.all-smiles {
    background-color: #b7181c;
}
.all-smiles h1 {
    color: white;
    display: inline;
    margin-right: 3%;
}
.all-smiles button {
    padding: 12px;
    background: 0;
    color: white;
    border: 1px solid #fff;
    text-decoration: none;
    font-family: young;
}

#child {
    display: table-cell;
    vertical-align: middle;
}

FIDDLE

1 个答案:

答案 0 :(得分:3)

你需要指定这两个:

  • 垂直对齐为numpy array
  • 行高和df1.D = df1.D.values print (df1) A B C D E F 0 1 4 7 1 5 1 1 2 5 8 6 3 4 2 3 6 9 5 6 3

代码:

middle

预览

preview

小提琴:https://jsfiddle.net/wd3sr2xv/